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): min & max support arbitrary value (#1974)

Browse Source
This commit is contained in:
Jake 2019-09-06 13:48:50 +08:00 committed by neverland
parent 14e5b62b83
commit 35b85f18dc
3 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
example/pages/slider/index.wxml
View File

@ -9,9 +9,8 @@
<demo-block title="指定选择范围"> <demo-block title="指定选择范围">
<van-slider <van-slider
custom-class="slider" custom-class="slider"
value="50" min="-50"
min="10" max="50"
max="90"
bind:change="onChange" bind:change="onChange"
/> />
</demo-block> </demo-block>

2
packages/slider/README.md
View File

@ -29,7 +29,7 @@ Page({
### 指定选择范围 ### 指定选择范围
```html ```html
<van-slider value="50" min="10" max="90" /> <van-slider min="-50" max="50" />
``` ```
### 禁用 ### 禁用

14
packages/slider/index.ts
View File

@ -70,19 +70,22 @@ VantComponent({
onClick(event: Weapp.TouchEvent) { onClick(event: Weapp.TouchEvent) {
if (this.data.disabled) return; if (this.data.disabled) return;
const { min } = this.data;
this.getRect('.van-slider').then((rect: WechatMiniprogram.BoundingClientRectCallbackResult) => { this.getRect('.van-slider').then((rect: WechatMiniprogram.BoundingClientRectCallbackResult) => {
const value = (event.detail.x - rect.left) / rect.width * 100; const value = (event.detail.x - rect.left) / rect.width * this.getRange() + min;
this.updateValue(value, true); this.updateValue(value, true);
}); });
}, },
updateValue(value: number, end: boolean, drag: boolean) { updateValue(value: number, end: boolean, drag: boolean) {
value = this.format(value); value = this.format(value);
const { barHeight } = this.data; const { barHeight, min } = this.data;
const width = `${((value - min) * 100) / this.getRange()}%`;
this.set({ this.set({
value, value,
barStyle: `width: ${value}%; height: ${addUnit(barHeight)};` barStyle: `width: ${width}; height: ${addUnit(barHeight)};`
}); });
if (drag) { if (drag) {
@ -94,6 +97,11 @@ VantComponent({
} }
}, },
getRange() {
const { max, min } = this.data;
return max - min;
},
format(value: number) { format(value: number) {
const { max, min, step } = this.data; const { max, min, step } = this.data;
return Math.round(Math.max(min, Math.min(value, max)) / step) * step; return Math.round(Math.max(min, Math.min(value, max)) / step) * step;