diff --git a/README.md b/README.md
index a7ba1eae..ae5a8f26 100644
--- a/README.md
+++ b/README.md
@@ -94,7 +94,7 @@ PS：关于 `van-area` Area 省市区选择组件，地区数据初始化可以
## 基础库版本
-Vant Weapp 最低支持到小程序基础库 2.2.3 版本
+Vant Weapp 最低支持到小程序基础库 2.6.5 版本
## 链接
diff --git a/example/pages/slider/index.wxml b/example/pages/slider/index.wxml
index 94dd2207..68f1c6eb 100644
--- a/example/pages/slider/index.wxml
+++ b/example/pages/slider/index.wxml
@@ -6,6 +6,15 @@
/>
+
+
+
+
this.format(val)) as [
+ number,
+ number
+ ];
+ } else {
+ this.startValue = this.format(this.newValue);
+ }
this.dragStatus = 'start';
},
@@ -60,7 +79,13 @@ VantComponent({
getRect(this, '.van-slider').then((rect) => {
const diff = (this.deltaX / rect.width) * this.getRange();
- this.newValue = this.startValue + diff;
+
+ if (this.isRange(this.startValue)) {
+ (this.newValue as [number, number])[this.buttonIndex] =
+ this.startValue[this.buttonIndex] + diff;
+ } else {
+ this.newValue = this.startValue + diff;
+ }
this.updateValue(this.newValue, false, true);
});
},
@@ -82,20 +107,50 @@ VantComponent({
getRect(this, '.van-slider').then((rect) => {
const value =
((event.detail.x - rect.left) / rect.width) * this.getRange() + min;
- this.updateValue(value, true);
+
+ if (this.isRange(this.value)) {
+ const [left, right] = this.value;
+ const middle = (left + right) / 2;
+
+ if (value <= middle) {
+ this.updateValue([value, right], true);
+ } else {
+ this.updateValue([left, value], true);
+ }
+ } else {
+ this.updateValue(value, true);
+ }
});
},
- updateValue(value: number, end?: boolean, drag?: boolean) {
- value = this.format(value);
- const { min } = this.data;
- const width = `${((value - min) * 100) / this.getRange()}%`;
+ isRange(val: unknown): val is [number, number] {
+ const { range } = this.data;
+ return range && Array.isArray(val);
+ },
+
+ handleOverlap(value: [number, number]) {
+ if (value[0] > value[1]) {
+ return value.slice(0).reverse();
+ }
+ return value;
+ },
+
+ updateValue(value: SliderValue, end?: boolean, drag?: boolean) {
+ if (this.isRange(value)) {
+ value = this.handleOverlap(value).map((val) => this.format(val)) as [
+ number,
+ number
+ ];
+ } else {
+ value = this.format(value);
+ }
this.value = value;
this.setData({
barStyle: `
- width: ${width};
+ width: ${this.calcMainAxis()};
+ left: ${this.isRange(value) ? `${value[0]}%` : 0};
${drag ? 'transition: none;' : ''}
`,
});
@@ -113,11 +168,26 @@ VantComponent({
}
},
+ getScope() {
+ return Number(this.data.max) - Number(this.data.min);
+ },
+
getRange() {
const { max, min } = this.data;
return max - min;
},
+ // 计算选中条的长度百分比
+ calcMainAxis() {
+ const { value } = this;
+ const { min } = this.data;
+ const scope = this.getScope();
+ if (this.isRange(value)) {
+ return `${((value[1] - value[0]) * 100) / scope}%`;
+ }
+ return `${((value - Number(min)) * 100) / scope}%`;
+ },
+
format(value: number) {
const { max, min, step } = this.data;
return Math.round(Math.max(min, Math.min(value, max)) / step) * step;
diff --git a/packages/slider/index.wxml b/packages/slider/index.wxml
index 11908eda..7129a5bc 100644
--- a/packages/slider/index.wxml
+++ b/packages/slider/index.wxml
@@ -11,6 +11,44 @@
style="{{ barStyle }}; {{ style({ backgroundColor: activeColor }) }}"
>
+
+
+
+
+
+
+
+
+