blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-09-06 16:09:44 +08:00
Code Issues Projects Releases Wiki Activity

feat(Slider): add slide animation & improve click area (#2146)

Browse Source
This commit is contained in:
neverland 2019-10-12 11:39:24 +08:00 committed by GitHub
parent dc9fab0a1e
commit dd6053cd09
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/slider/index.less
View File

@ -6,15 +6,26 @@
border-radius: 999px; border-radius: 999px;
.theme(background-color, '@gray-light'); .theme(background-color, '@gray-light');
// use pseudo element to expand click area
&::before {
position: absolute;
top: -@padding-xs;
right: 0;
bottom: -@padding-xs;
left: 0;
content: '';
}
&__bar { &__bar {
position: relative; position: relative;
border-radius: inherit; border-radius: inherit;
transition: width @animation-duration-fast;
.theme(background-color, '@blue'); .theme(background-color, '@blue');
} }
&__button { &__button {
width: 20px; width: 24px;
height: 20px; height: 24px;
border-radius: 50%; border-radius: 50%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
.theme(background-color, '@white'); .theme(background-color, '@white');

6
packages/slider/index.ts
View File

@ -96,7 +96,11 @@ VantComponent({
this.setData({ this.setData({
value, value,
barStyle: `width: ${width}; height: ${addUnit(barHeight)};` barStyle: `
width: ${width};
height: ${addUnit(barHeight)};
${drag ? 'transition: none;' : ''}
`,
}); });
if (drag) { if (drag) {