小程序中多滑块的完成代码1

小程序中多滑块的完成代码

微信小程序，简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。小程序是一种不用下载就能使用的应用，也是一项门槛非常高的创新，经过将近两年的发展，已经构造了新的小程序开发环境和开发者生态。

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

最近在用原生的代码开发小程序，需要用到多滑块的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', }) } }