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

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

最近在用原生的代码开发小程序，需要用到多滑块的slider，但是官方的api只支持单滑块，所以就在原来的基础上草草的写了一个。有什么不足的地方还请大家多多指教，想封装成组件的也可自行封装，我这就不讲了。；

话不多说，上代码：

html:

 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: #39;50 #39;, //左边滑块可滑动长度：百分比
 rightWidth: #39;50 #39;, //右边滑块可滑动长度：百分比
 sliderWidth:0, // slider的宽度；
 setSliderLeftX: 0, // 设置的sliderp的left
 setSliderWidthX: 0// 设置的sliderp的width
onLoad(options) {
 var query = wx.createSelectorQuery(); // 如果是封装的组件的话，这边请注意写法不同哦；
 query.select( #39;.slider-left #39;).boundingClientRect((rect) = { 
 this.setData({
 sliderWidth: rect.width,
 setSliderLeftX: (rect.width / this.data.Max * this.data.leftValue) + this.data.blockSize/2 + #39;px #39;,
 setSliderWidthX: rect.width / this.data.Max * (this.data.rightValue - this.data.leftValue) - this.data.blockSize + #39;px #39;,
 }).exec();
 // 左边滑块滑动的值
 leftChange(e){
 var that = this;
 that.setData({
 leftValue: e.detail.value //设置左边当前值
 this.setSliderBgColor(e, #39;left #39;);
 // 右边滑块滑动的值
 rightChange: function (e) {
 var that = this;
 that.setData({
 rightValue: e.detail.value,
 this.setSliderBgColor(e, #39;right #39;);
 setSliderBgColor(e, type){
 if (type == #39;left #39;) { // 左边
 if (this.data.leftValue this.data.rightValue) {
 console.log( #39;拖左不超右边 #39;);
 this.setData({ 
 leftShowValue: e.detail.value,
 this.setData({ 
 rightShowValue: this.data.rightValue,
 } else {
 console.log( #39;拖左超右边 #39;);
 this.setData({ 
 leftShowValue: this.data.rightValue,
 this.setData({ 
 rightShowValue: e.detail.value,
 } else { // 右边
 if (this.data.leftValue this.data.rightValue) {
 console.log( #39;拖右不超右边 #39;);
 this.setData({ 
 rightShowValue: e.detail.value,
 this.setData({
 leftShowValue: this.data.leftValue,
 } else {
 console.log( #39;拖右超右边 #39;)
 this.setData({ 
 leftShowValue: e.detail.value,
 this.setData({ 
 rightShowValue: this.data.leftValue,
 if (v * (this.data.rightShowValue - this.data.leftShowValue) - this.data.blockSize = 0) {
 this.setData({
 setSliderLeftX: (v * this.data.leftShowValue) + this.data.blockSize / 2 + #39;px #39;,
 setSliderWidthX: v * (this.data.rightShowValue - this.data.leftShowValue) - this.data.blockSize + #39;px #39;,
 // console.log(1)
 } else {
 this.setData({
 setSliderLeftX: (v * this.data.leftShowValue) + this.data.blockSize / 2 + #39;px #39;,
 setSliderWidthX: 0 + #39;px #39;,
  
 最佳 Windows 性能的顶级免费优化软件
 
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。