微信小程序双向滑动slider

<!-- <view class='buyMian-title'>预算</view> --><view class='buyMian-slide'>  <view class='buyMian-slide-title'>{{slider1Value}}万-{{slider2Value}}万</view>  <view class='buyMian-slide-contain'>    <slider style='width:{{slider1W+"%"}}' class='slider-left' min='{{min}}' max='{{slider1Max}}' backgroundColor='#ff7500' activeColor='#f7f7f7' bindchanging='changing' catchtouchstart='changeStart' bindchange='changed' data-idx='1'></slider>    <slider wx:if='{{!change}}' style='width:{{slider2W+"%"}}' class='slider-right' min='{{slider2Min}}' max='{{max}}' backgroundColor='#f7f7f7' activeColor='#ff7500' bindchanging='changing' catchtouchstart='changeStart' bindchange='changed' data-idx='2'></slider>  </view>  <view class='flex flexSb buyMian-slide-range'>    <view class=''>{{slider1Value}}万</view>    <view class=''>{{slider2Value}}万</view>  </view></view>

Component({   /**   * 页面的初始数据   */  data: {    change: false, // 当两个slider在最右端重合时，将change设置为true，从而隐藏slider2，才能继续操作slider1    max: 1000, // 两个slider所能达到的最大值    min: 50, // 两个slider所能取的最小值    rate: 9.5, // slider的最大最小值之差和100（或1000）之间的比率    slider1Max: 1000, // slider1的最大取值    slider1Value: 50, // slider1的值    slider2Value: 1000, // slider2的值    slider2Min: 50, // slider2的最小取值    slider1W: 100, // slider1的宽度    slider2W: 0, // slider2的宽度  },  methods:{    // 开始滑动  changeStart: function (e) {    var idx = parseInt(e.currentTarget.dataset.idx)    if (idx === 1) {      // dW是当前操作的slider所能占据的最大宽度百分数      var dW = (this.data.slider2Value - this.data.min) / this.data.rate      this.setData({        slider1W: dW,        slider2W: 100 - dW,        slider1Max: this.data.slider2Value,        slider2Min: this.data.slider2Value,        change: false      })    } else if (idx === 2) {      var dw = (this.data.max - this.data.slider1Value) / this.data.rate      this.setData({        slider2W: dw,        slider1W: 100 - dw,        slider1Max: this.data.slider1Value,        slider2Min: this.data.slider1Value,        change: false      })    }  },   // 正在滑动  changing: function (e) {    var idx = parseInt(e.currentTarget.dataset.idx)    var value = e.detail.value    if (idx === 1) {      this.setData({        slider1Value: value      })    } else if (idx === 2) {      this.setData({        slider2Value: value,      })    }  },  changed: function (e) {    console.log(e)    if (this.data.slider1Value === this.data.slider2Value && this.data.slider2Value === this.data.max) {      this.setData({        change: true      })    }  },  },  })

/* slide */ .buyMian-slide, .buyMian-title {  width: 654rpx;  margin: 0 auto;} .buyMian-title {  font-size: 34rpx;  color: #212121;  line-height: 36rpx;  margin-top: 45rpx;} .buyMian-slide-title {  font-size: 36rpx;  color: #ff7500;  line-height: 38rpx;  margin-top: 25rpx;  text-align: center;} .buyMian-slide-slide {  margin: 10rpx auto 0;} /* range */ .buyMian-slide-contain {  width: 100%;  display: flex;  padding: 20px 0 10px;  position: relative;  left: -25rpx;} .buyMian-slide-range {  font-size: 26rpx;  color: #8a8a8a;  margin-top: 15rpx;} .slider-left, .slider-right {  margin-right: -8rpx;} .flex {  display: -webkit-box;  display: -moz-box;  display: -ms-flexbox;  display: -webkit-flex;  display: flex;  display: box;  flex-wrap: wrap;} .flexSb {  justify-content: space-between;  -webkit-justify-content: space-between;  -moz-justify-content: space-between;  -ms-justify-content: space-between;  -o-justify-content: space-between;}