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

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

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

jsdata: {

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

})

}

}

相关推荐：