小编给大家分享一下小程序中如何实现slider多滑块，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
10年的玉龙网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。网络营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整玉龙建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联从事“玉龙网站设计”,“玉龙网站推广”以来，每个客户项目都认真落实执行。
最近在用原生的代码开发小程序，需要用到多滑块的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',
})
}
}以上是“小程序中如何实现slider多滑块”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
分享文章：小程序中如何实现slider多滑块
分享地址：
http://bzwzjz.com/article/ppdcpo.html
