本篇文章给大家带来的内容是关于小程序中多滑块的实现代码 ，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
最近在用原生的代码开发小程序，需要用到多滑块的slider，但是官方的api只支持单滑块，所以就在原来的基础上草草的写了一个。有什么不足的地方还请大家多多指教，想封装成组件的也可自行封装，我这就不讲了。；
话不多说，上代码：
html:
￥{{leftShowValue}} ￥{{rightShowValue}}
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',})
}
}
