微信小程序双向滑动slider-即速应用

1.使用场景，通过滑动滑块，获取价格的范围，提交表单获取搜索结果。slider是单向的，这种范围获取的可能不行（当时的想法），还有一种思路，就是通过touch事件，使用view进行布局，手写一个（这种当然可以）。然后再网上找了一些资料，发现有人也有相同的需求，而且有案例，然后就做了伸手党，并且把找到的资料做了一下整理，方便后续参考使用，如有侵权，请联系博主删除。

2.代码

2.1wxml

view class='buyMian-title'预算/viewview class='buyMian-slide'  view class='buyMian-slide-title'{{min}}万-{{max}}万/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

2.2wxss

/* 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;}

2.3js

Page({  /**   * 页面的初始数据   */  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的宽度  },  // 开始滑动  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      })    }  },})

2.4效果