Implementation code of multiple sliders in mini program

The content of this article is about the implementation code of multiple sliders in the mini program. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Recently I am developing a small program using native code, which requires the use of a multi-slider slider, but the official API only supports a single slider, so I wrote one hastily based on the original one. If you have any shortcomings, please give me your advice. If you want to package it into components, you can also package it yourself. I won't go into it here. ;

Without further ado, here’s the code:

html:

<view class=&#39;sliderHCon&#39;>
  <view class=&#39;showMoney&#39;>
    <text class=&#39;MoneyValue&#39;>￥{{leftShowValue}}</text>
    <text class=&#39;MoneyValue&#39;>￥{{rightShowValue}}</text>
  </view>

  <view class=&#39;twoSlider&#39;>
    <slider class=&#39;slider-left&#39; min=&#39;{{Min}}&#39; max=&#39;{{Max}}&#39; value=&#39;{{leftValue}}&#39; activeColor=&#39;#ccc&#39; backgroundColor=&#39;#ccc&#39; block-size=&#39;{{blockSize}}&#39; step=&#39;{{step}}&#39; bindchanging="leftChange" rightChange=&#39;leftChange&#39;>
      <em class=&#39;slider-bg&#39; style=&#39;left:{{setSliderLeftX}};width:{{setSliderWidthX}}&#39;></em>
    </slider>
    <slider class=&#39;slider-right&#39; min=&#39;{{Min}}&#39; max=&#39;{{Max}}&#39; value=&#39;{{rightValue}}&#39; activeColor=&#39;#ccc&#39; backgroundColor=&#39;#ccc&#39; block-size=&#39;{{blockSize}}&#39; step=&#39;{{step}}&#39; bindchanging="rightChange" bindchange=&#39;rightChange&#39;/>
  </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, // 设置的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(&#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,
          })
        }
      }


     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 + &#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;,
        })
     
      }
    
   
  }

Related recommendations:

Two ways to use Python to generate QR codes in WeChat mini programs

WeChat mini program function implementation: slide up to load and pull down to refresh

The above is the detailed content of Implementation code of multiple sliders in mini program. For more information, please follow other related articles on the PHP Chinese website!