小程序slider实现双向滑动(价格区间选择)

小程序 专栏收录该内容
6 篇文章 0 订阅

本人最近在写一个关于民宿的小程序,有个需求是,用户可以选择价格区间进行房屋的搜索,首先想到的是可以用微信小程序自己的组件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)
  },

里面有些代码涉及到其他模块,可以忽略

  • 2
    点赞
  • 14
    评论
  • 7
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页

打赏

zhanjinfeng

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值