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

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

js

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',         })             }            }

相关推荐：

微信小程序中用Python生成二维码的两种方式

微信小程序功能实现：上滑加载下拉刷新

以上就是小程序中多滑块的实现代码的详细内容，更多内容请关注技术你好其它相关文章！