Code d'implémentation de plusieurs curseurs dans un mini programme

Le contenu de cet article concerne le code d'implémentation de plusieurs curseurs dans le mini-programme. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Récemment, je développe un petit programme utilisant du code natif, qui nécessite l'utilisation d'un curseur multi-curseur, mais l'API officielle ne prend en charge qu'un seul curseur, j'en ai donc écrit un à la hâte basé sur celui d'origine. Si vous avez des lacunes, donnez-moi votre avis. Si vous souhaitez le regrouper en composants, vous pouvez également le regrouper vous-même, je n'entrerai pas dans les détails ici. ;

Sans plus attendre, voici le 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;,
        })
     
      }
    
   
  }

Recommandations associées :

Deux façons d'utiliser Python pour générer des codes QR dans les mini-programmes WeChat

Implémentation de la fonction du mini-programme WeChat : faites glisser vers le haut pour charger et déroulez Actualiser

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!