blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-06 03:58:05 +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;
.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 {
position: relative;
border-radius: inherit;
transition: width @animation-duration-fast;
.theme(background-color, '@blue');
}
&__button {
width: 20px;
height: 20px;
width: 24px;
height: 24px;
border-radius: 50%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
.theme(background-color, '@white');

6
packages/slider/index.ts
View File

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