尊重劳动成果，转载请注明出处（https://blog.csdn.net/sllailcp/article/details/82595358）...
最近在用原生的代码开发小程序，需要用到多滑块的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, // 设置的sliderdiv的left
setSliderWidthX: 0// 设置的sliderdiv的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',
})
}
}
效果图如下（支持点击，拖动），觉得不错的，请给博主一个赞哦。：
--------------------- 本文来自 darkblueLove 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/sllailcp/article/details/82595358?utm_source=copy