小程序slider實現雙向滑動（價格區間選擇）

本人最近在寫一個關於民宿的小程序，有個需求是，用戶可以選擇價格區間進行房屋的搜索，首先想到的是可以用微信小程序自己的組件slider滑塊來實現，但是slider只支持單向滑動，上網查詢大量資料發現還沒有人實現小程序支持的雙向滑動，於是便自己瞎捉摸了一下。將2個slider的position設置爲absolute，看起來就像是一個slider，實際上則爲2個。好了不廢話了，上圖上代碼！

wxml 代碼：

<view class='sliderView'>
  <slider class='left' block-color='orange'  bindchange="leftSchange" min='{{leftMin}}' max='{{leftMax}}' value='{{leftValue}}' activeColor='rgb(243,242,247)' backgroundColor='rgb(243,242,247)' block-size='14'/>
  <slider class='right' block-color='orange' bindchange="rightSchange" min='{{rightMin}}' max='{{rightMax}}' value='{{rightValue}}' activeColor='rgb(243,242,247)' backgroundColor='rgb(243,242,247)' block-size='14'/>
</view>

wxss 代碼：

.sliderView{
  position: relative;
  width: 93%;
  margin: 0 15rpx
}
.left{
  position: absolute;
  width: 90%
}
.right{
  position: absolute;
  width: 90%
}

js 代碼：

data: {
    leftMin: 0,
    leftMax: 6,
    rightMin: 0,
    rightMax: 6,
    leftValue: 0,
    rightValue: 6
}，
//價格slider滑動
  leftSchange: function (e) {
    var that = this
    that.setData({
      isQuery: false
    })
    var value = e.detail.value
    if(value==that.data.rightValue){
      if(that.data.rightValue==6) value--
      else value++
    }
    that.setData({
      leftValue: value
    })
    if(value<that.data.rightValue){
      var bg_price = that.data.priceList[value].slice(1)
      var end_price = that.data.priceList[that.data.rightValue].slice(1)
    }
    else{
      var end_price = that.data.priceList[value].slice(1)
      var bg_price = that.data.priceList[that.data.rightValue].slice(1)
    }
    list['bg_price'] = bg_price
    list['end_price'] = end_price
    wx.setStorageSync("priceList", { bg_price: value, end_price: that.data.leftValue})
    setTimeout(function () {
      wxb.Post('/api/minsu.index/index', list, function (data) {
        console.log(list,"價格slider")
        console.log(data)
        that.setData({
          isQuery: true
        })
        if (data.length != 0) {
          that.setData({
            result: data.num + '套',
          })
        }
        else {
          that.setData({
            result: '0套',
          })
        }
      })
    }, 700)
  },
//右邊
rightSchange: function (e) {
    var that = this
    that.setData({
      isQuery: false
    })
    var value = e.detail.value
    if (value == that.data.leftValue) {
      if(that.data.leftValue==6) value--
      else value++
    }
    that.setData({
      rightValue: value
    })
    if (value < that.data.leftValue) {
      var bg_price = that.data.priceList[value].slice(1)
      var end_price = that.data.priceList[that.data.leftValue].slice(1)
    }
    else {
      var end_price = that.data.priceList[value].slice(1)
      var bg_price = that.data.priceList[that.data.leftValue].slice(1)
    }
    list['bg_price'] = bg_price
    list['end_price'] = end_price
    wx.setStorageSync("priceList", { bg_price: value, end_price: that.data.leftValue })
    setTimeout(function () {
      wxb.Post('/api/minsu.index/index', list, function (data) {
        console.log(list, "價格slider")
        console.log(data)
        that.setData({
          isQuery: true
        })
        if (data.length != 0) {
          that.setData({
            result: data.num + '套',
          })
        }
        else {
          that.setData({
            result: '0套',
          })
        }
      })
    }, 700)
  },

裏面有些代碼涉及到其他模塊，可以忽略