本人最近在寫一個關於民宿的小程式，有個需求是，使用者可以選擇價格區間進行房屋的搜尋，首先想到的是可以用微信小程式自己的元件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)
  },
 

裡面有些程式碼涉及到其他模組，可以忽略