小程序 slider 双向滑动

Love The Way You Lie 2024-04-20 08:24 71阅读 0赞

先上效果图，csdn不支持视频，这是手机录屏做成的gif，所以画质有点。。

![20190920133405935.gif][]

直接上代码，小程序暂时不支持slider双向滑动，所以把两个slider拼起来用

<view class='sliderHCon'>
      <view class='showMoney'>
        <text class='MoneyValue'>￥{
       {min}}</text>
        <text class='MoneyValue'>￥{
       {max}}</text>
      </view>
    
      <view class='twoSlider'>
        <view class='select-construct'>
          <view class='select-area'>
            <view class='slider-container'>
              <view class='leftSliderPrice sliderPrice' style='left:{
       {leftSliderPriceWidthX}};'>
                <view class='sliderView'>
                  ￥{
       {slider1Value*scale}}
                </view>
              </view>
              <slider style='width:{
       {slider1W+"%"}}' class='slider-left' min='{
       {min}}' max='{
       {slider1Max}}' color='#FFAC30'
              selected-color='#e5e5e5' bindchanging='changing' catchtouchstart='changeStart' bindchange='changed' data-idx='1'></slider>
              <view class='rightSliderPrice sliderPrice' style='right:{
       {rightSliderPriceWidthX}};'>
                <view class='sliderView'>
                  ￥{
       {slider2Value*scale}}
                </view>
              </view>
              <slider wx:if='{
       {!change}}' style='width:{
       {slider2W+"%"}}' class='slider-right' min='{
       {slider2Min}}' max='{
       {max}}' color='#e5e5e5'
               selected-color='#FFAC30' bindchanging='changing'catchtouchstart='changeStart'  bindchange='changed' data-idx='2'></slider>
            </view>
          </view>
        </view>
      </view>
    </view>

.sliderHCon {
      height: 250rpx;
      width: 100%;
      margin: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    
    .MoneyValue {
      font-size: 22rpx;
      text-align: center;
      color: #666;
      margin-top: 15rpx;
    }
    .showMoney {
      display: flex;
      justify-content: space-between;
      width: 68%;
      margin-top: -34px;
      position: absolute;
      color: #666;
      font-size: 22rpx;
    }
    
    .showMoney text {
      margin-right: -67rpx;
    }
    .twoSlider {
      width: 93%;
      height:100px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      position: relative;
    }
    .twoSlider .leftSliderPrice {
      position: absolute;
      top: -34rpx;
      left: 0;
      width: 100rpx;
      height: 60rpx;
      line-height: 40rpx;
      padding: 20rpx;
      text-align: center;
      color: #FFF;
    }
    .sliderPrice view {
    	width: 100%;
    	height: 100%;
    	background-repeat: no-repeat;
    	background-position: center;
    	background-size: cover;
      font-size: 22rpx;
    }
    .twoSlider .rightSliderPrice {
      position: absolute;
      top: -34rpx;
      right: 0;
      width: 100rpx;
      height: 60rpx;
      line-height: 40rpx;
      padding: 20rpx;
      text-align: center;
      color: #FFF;
    }
    .sliderView {
      border: solid red 1rpx;
      color: red;
    }
    
    /* 滑动样式 */
    .select-construct{
      width: 100%;
    }
    .select-area{
      width: 80%;
      padding: 30px 10% 15px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .slider-container{
      width: 100%;
      display: flex;
      padding: 20px 0 10px;
      position: relative;
    }
    .slider-left,.slider-right{
      margin-right: -8rpx;
    }

Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        change: false, // 当两个slider在最右端重合时，将change设置为true，从而隐藏slider2，才能继续操作slider1
        max: 10000, // 两个slider所能达到的最大值
        min: 0, // 两个slider所能取的最小值
        rate: 100, // slider的最大最小值之差和100（或1000）之间的比率
        scale: 1, // 比例系数。页面显示值的时候，需要将slider1Value(slider2Value)乘以比例系数scale
        slider1Max: 10000, // slider1的最大取值
        slider1Value: 0, // slider1的值
        slider2Value: 10000, // slider2的值
        slider2Min: 0, // slider2的最小取值
        slider1W: 100, // slider1的宽度
        slider2W: 0, // slider2的宽度
        leftSliderPriceWidthX: '-1.5%',
        rightSliderPriceWidthX: '-21%'
      },
      // 开始滑动
      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
        let rightSliderPriceWidthX = (this.data.max-value)/116-21
        let leftSliderPriceWidthX = value/116
        if (idx === 1) {
          this.setData({
            slider1Value: value,
            leftSliderPriceWidthX:leftSliderPriceWidthX+'%'
          })
        } else if (idx === 2) {
          this.setData({
            slider2Value: value,
            rightSliderPriceWidthX: rightSliderPriceWidthX+'%'
          })
        }
      },
      changed: function (e) {
        if (this.data.slider1Value === this.data.slider2Value && this.data.slider2Value === this.data.max) {
          this.setData({
            change: true
          })
        }
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
    
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })

[20190920133405935.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/b0eb4ea4554f4708983198dc98c09dab.gif