小程序中多滑块的实现代码-9543建站博客

广告：宝塔Linux面板高效运维的服务器管理软件点击【 https://www.bt.cn/p/uNLv1L 】立即购买

小程序中多滑块的实现代码

本篇文章给大家带来的内容是关于小程序中多滑块的实现代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

最近在用原生的代码开发小程序，需要用到多滑块的slider，但是官方的api只支持单滑块，所以就在原来的基础上草草的写了一个。有什么不足的地方还请大家多多指教，想封装成组件的也可自行封装，我这就不讲了。；

话不多说，上代码：

html:

<view class='sliderHCon'>  <view class='showMoney'>    <text class='MoneyValue'>￥{{leftShowValue}}</text>    <text class='MoneyValue'>￥{{rightShowValue}}</text>  </view>  <view class='twoSlider'>    <slider class='slider-left' min='{{Min}}' max='{{Max}}' value='{{leftValue}}' activeColor='#ccc' backgroundColor='#ccc' block-size='{{blockSize}}' step='{{step}}' bindchanging="leftChange" rightChange='leftChange'>      <em class='slider-bg' style='left:{{setSliderLeftX}};width:{{setSliderWidthX}}'></em>    </slider>    <slider class='slider-right' min='{{Min}}' max='{{Max}}' value='{{rightValue}}' activeColor='#ccc' backgroundColor='#ccc' block-size='{{blockSize}}' step='{{step}}' bindchanging="rightChange" bindchange='rightChange'/>  </view></view>

登录后复制

css

.sliderHCon {  height: 250rpx;  width: 100%;  margin: auto;  display: flex;  justify-content: center;  align-items: center;  flex-direction: column;}.MoneyValue {  font-size: 30rpx;  text-align: center;  color: #999;  margin-top: 15rpx;}.showMoney text {  margin-right: 30rpx;}.twoSlider {  width: 100%;  height:100px;  display: flex;  flex-direction: row;  justify-content: center;  align-items: center;  position: relative;}.slider-left,.slider-right{position: absolute;left:0;right:0;}.slider-bg{position: absolute;top:50%;margin-top:-1px;left:0;width:100%;height:2px;background: blue;z-index: 9;}

登录后复制

data: {      blockSize:20,      step:10,      Min: 0, //最小值      Max: 1000, //最大值      leftValue: 0, //左边滑块默认值      rightValue: 1000, //右边滑块默认值      leftShowValue: 0, //界面显示左边滑块默认值      rightShowValue: 1000, //界面显示右边滑块默认值      leftWidth: '50', //左边滑块可滑动长度：百分比      rightWidth: '50', //右边滑块可滑动长度：百分比      sliderWidth:0, // slider的宽度；      setSliderLeftX: 0, // 设置的sliderp的left      setSliderWidthX: 0// 设置的sliderp的width    },onLoad(options) {      var query = wx.createSelectorQuery(); // 如果是封装的组件的话，这边请注意写法不同哦；      query.select('.slider-left').boundingClientRect((rect) => {                this.setData({          sliderWidth: rect.width,          setSliderLeftX: (rect.width / this.data.Max * this.data.leftValue) + this.data.blockSize/2 + 'px',          setSliderWidthX: rect.width / this.data.Max * (this.data.rightValue - this.data.leftValue) - this.data.blockSize + 'px',        })              }).exec();            }, // 左边滑块滑动的值  leftChange(e){        var that = this;    that.setData({      leftValue: e.detail.value //设置左边当前值    })    this.setSliderBgColor(e,'left');  },  // 右边滑块滑动的值  rightChange: function (e) {    var that = this;    that.setData({      rightValue: e.detail.value,    })    this.setSliderBgColor(e, 'right');  },  setSliderBgColor(e, type){      if (type == 'left') { // 左边        if (this.data.leftValue < this.data.rightValue) {          console.log('拖左不超右边');          this.setData({             leftShowValue: e.detail.value,          })          this.setData({             rightShowValue: this.data.rightValue,          })        } else {          console.log('拖左超右边');          this.setData({             leftShowValue: this.data.rightValue,          })          this.setData({             rightShowValue: e.detail.value,          })        }      } else { // 右边        if (this.data.leftValue < this.data.rightValue) {          console.log('拖右不超右边');          this.setData({             rightShowValue: e.detail.value,          })          this.setData({            leftShowValue: this.data.leftValue,          })        } else {          console.log('拖右超右边')          this.setData({             leftShowValue: e.detail.value,          })          this.setData({             rightShowValue: this.data.leftValue,          })        }      }     const v = this.data.sliderWidth / this.data.Max             if (v * (this.data.rightShowValue - this.data.leftShowValue) - this.data.blockSize >= 0) {        this.setData({          setSliderLeftX: (v * this.data.leftShowValue) + this.data.blockSize / 2 + 'px',          setSliderWidthX: v * (this.data.rightShowValue - this.data.leftShowValue) - this.data.blockSize + 'px',        })       // console.log(1)      } else {        this.setData({          setSliderLeftX: (v * this.data.leftShowValue) + this.data.blockSize / 2 + 'px',          setSliderWidthX: 0 + 'px',        })           }         }

登录后复制

相关推荐