微信小程序双向滑动slider

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

2.代码

2.1wxml

<view class='buyMian-title'>预算</view>
<view 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效果

3.说明

3.1转载地址：https://blog.csdn.net/Hero_rong/article/details/101057530

3.2推荐地址：https://www.jianshu.com/p/7eaf95d1ae1f

3.3推荐地址：https://github.com/weixianlove/zy-slider （这个在git上有组件源码，拉下来可直接使用）

3.4推荐地址：https://blog.csdn.net/qq_35324453/article/details/81952794 （这个有点瑕疵，可以看下）

3.5推荐地址：https://blog.csdn.net/huangyuxin_/article/details/79507114 （这个其实讲的是api的使用，能把线条改为彩色的，也可看看）

微信小程序双向滑动slider

猜你喜欢