집 >위챗 애플릿 >미니 프로그램 개발 >미니 프로그램의 여러 슬라이더 구현 코드

미니 프로그램의 여러 슬라이더 구현 코드

不言원래의: 2018-09-11 17:22:582924검색

이 기사의 내용은 미니 프로그램의 여러 슬라이더 구현 코드에 관한 것입니다. 이는 특정 참고 가치가 있으므로 도움이 될 수 있습니다.

최근 네이티브 코드를 사용하여 멀티 슬라이더 슬라이더를 사용해야 하는 작은 프로그램을 개발하고 있는데 공식 API는 단일 슬라이더만 지원하므로 원본을 기반으로 급하게 하나 작성했습니다. 부족한 점이 있으면 조언을 부탁드립니다. 구성 요소로 패키지하려면 여기서는 다루지 않겠습니다. ;

더 이상 고민하지 말고 코드는 다음과 같습니다.

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;}

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,
          })
        }
      }


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

미니 프로그램의 여러 슬라이더 구현 코드

관련 기사