蜜桃免费在线视频,亚欧美在线观看,久久久久狠狠高潮亚洲精品

導(dǎo)讀微信小程序，簡(jiǎn)稱小程序，英文名Mini Program，是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想，用戶掃一掃或搜一下即可打開應(yīng)用。小程序是一種不用下載就能使用的應(yīng)用，也是一...

微信小程序，簡(jiǎn)稱小程序，英文名Mini Program，是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想，用戶掃一掃或搜一下即可打開應(yīng)用。小程序是一種不用下載就能使用的應(yīng)用，也是一項(xiàng)門檻非常高的創(chuàng)新，經(jīng)過將近兩年的發(fā)展，已經(jīng)構(gòu)造了新的小程序開發(fā)環(huán)境和開發(fā)者生態(tài)。

本篇文章給大家?guī)淼膬?nèi)容是關(guān)于小程序中多滑塊的實(shí)現(xiàn)代碼，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。

最近在用原生的代碼開發(fā)小程序，需要用到多滑塊的slider，但是官方的api只支持單滑塊，所以就在原來的基礎(chǔ)上草草的寫了一個(gè)。有什么不足的地方還請(qǐng)大家多多指教，想封裝成組件的也可自行封裝，我這就不講了。；

話不多說，上代碼：

html:

<view class='sliderHCon'>
  <view class='showMoney'>
    <text class='MoneyValue'>￥{{leftShowValue}}</text>
    <text class='MoneyValue'>￥{{rightShowValue}}</text>
  </view>

  <view class='twoSlider'>
    <slider class='slider-left' min='{{Min}}' max='{{Max}}' value='{{leftValue}}' activeColor='#ccc' backgroundColor='#ccc' block-size='{{blockSize}}' step='{{step}}' bindchanging="leftChange" rightChange='leftChange'>
      <em class='slider-bg' style='left:{{setSliderLeftX}};width:{{setSliderWidthX}}'></em>
    </slider>
    <slider class='slider-right' min='{{Min}}' max='{{Max}}' value='{{rightValue}}' activeColor='#ccc' backgroundColor='#ccc' block-size='{{blockSize}}' step='{{step}}' bindchanging="rightChange" bindchange='rightChange'/>
  </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, //左邊滑塊默認(rèn)值
      rightValue: 1000, //右邊滑塊默認(rèn)值
      leftShowValue: 0, //界面顯示左邊滑塊默認(rèn)值
      rightShowValue: 1000, //界面顯示右邊滑塊默認(rèn)值
      leftWidth: '50', //左邊滑塊可滑動(dòng)長(zhǎng)度：百分比
      rightWidth: '50', //右邊滑塊可滑動(dòng)長(zhǎng)度：百分比
      sliderWidth:0, // slider的寬度；
      setSliderLeftX: 0, // 設(shè)置的sliderp的left
      setSliderWidthX: 0// 設(shè)置的sliderp的width
    },

onLoad(options) {
      var query = wx.createSelectorQuery(); // 如果是封裝的組件的話，這邊請(qǐng)注意寫法不同哦；
      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();
        
    },

 // 左邊滑塊滑動(dòng)的值
  leftChange(e){
    
    var that = this;
    that.setData({
      leftValue: e.detail.value //設(shè)置左邊當(dāng)前值
    })
    this.setSliderBgColor(e,'left');
  },
  // 右邊滑塊滑動(dòng)的值
  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',
        })
     
      }
    
   
  }

相關(guān)推薦：

微信小程序中用Python生成二維碼的兩種方式

微信小程序功能實(shí)現(xiàn)：上滑加載下拉刷新

以上就是小程序中多滑塊的實(shí)現(xiàn)代碼的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

小程序是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想，用戶掃一掃或者搜一下即可打開應(yīng)用。

溫馨提示：喜歡本站的話，請(qǐng)收藏一下本站！

當(dāng)前位置:雨林木風(fēng)下載站 > 應(yīng)用軟件教程 > 詳細(xì)頁(yè)面

小程序中多滑塊的完成代碼

本類教程下載

系統(tǒng)下載排行