微信小程序双向滑动slider

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

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的使用,能把线条改为彩色的,也可看看)

  • 0
    点赞
  • 0
    评论
  • 6
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值