微信小程序怎么實現豎排slider效果

這篇文章主要介紹了微信小程序怎么實現豎排slider效果的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇微信小程序怎么實現豎排slider效果文章都會有所收獲，下面我們一起來看看吧。

js：

Component({
  properties: {
    blockColor: {
      type: String,
      value: "#ffffff"
    },
    blockSize: {
      type: Number,
      value: 28
    },
    backgroundColor: {
      type: String,
      value: "#e9e9e9"
    },
    activeColor: {
      type: String,
      value: "#1aad19"
    },
    step: {
      type: Number,
      value: 1
    },
    min: {
      type: Number,
      value: 0
    },
    max: {
      type: Number,
      value: 100
    },
    value: {
      type: Number,
      value: 0
    },
    disabled: {
      type: Boolean,
      value: false
    },
    showValue: {
      type: Boolean,
      value: false
    },
  },
  observers: {
    'blockSize': function(blockSize) {
      if (blockSize > 28) {
        this.setData({
          blockSize: 28
        })
      } else if (blockSize < 12) {
        this.setData({
          blockSize: 12
        })
      }
    },
    'showValue': function(){
      this.queryHeight() // 由于顯示數字后，滑動區域變化，需要重新查詢可滑動高度
    }
  },
  data: {
    totalTop: null,
    totalHeight: null,
    currentValue: 0,
  },
  methods: {
    setCurrent: function(e){
      this.setData({
        currentValue: e.value
      })
    },
    queryHeight: function(){
      wx.createSelectorQuery().in(this).select('.slider-container').boundingClientRect((res) => {
        this.setData({
          totalTop: res.top,
          totalHeight: res.height
        })
      }).exec()
    },
    empty: function(){},
  }
})

json：

{
  "component": true,
  "usingComponents": {}
}

wxml：

<wxs module="eventHandle" src="./SliderVertical.wxs"></wxs>
<view class="slider" catchtouchmove="empty">
  <view class="slider-append" data-percent="0" bindtap="{{eventHandle.tapEndPoint}}"></view>
  <view class="slider-container" change:prop="{{eventHandle.propsChange}}" prop="{{ {max,min,step,value,totalTop,totalHeight,disabled} }}" >
    <view class="slider-lower" id="lower" catchtap="{{eventHandle.tap}}">
      <view class="slider-lower-line" ></view>
    </view>
    <view class="slider-middle">
      <view 
        class="slider-block" 
         
        catchtouchstart="{{eventHandle.start}}" 
        catchtouchmove="{{eventHandle.move}}"
        catchtouchend="{{eventHandle.end}}"
        ></view>
    </view>
    <view class="slider-upper" id="upper" catchtap="{{eventHandle.tap}}">
      <view class="slider-upper-line" ></view>
    </view>
  </view>
  <view class="slider-append" data-percent="1" bindtap="{{eventHandle.tapEndPoint}}"></view>
  <view class="slider-value" wx:if="{{showValue}}">{{currentValue}}</view>
</view>

wxs:

var notInt = function(num) {
  return num !== parseInt(num)
}
/*
 * state:共享臨時數據對象
 * state.max:最大值
 * state.min:最小值
 * state.offset:當前高度，即value-min的值（未按照step糾正的值）
 * state.step:步長
 * ins:頁面或組件實例
 */
var calculate = function(instance,state,changeCallback){
  var max = state.max
  var min = state.min
  var offset = state.offset
  var step = state.step
  // 1、計算 offset 按照 step 算應該是幾個。
  // Math.round(offset % step / step) 計算的是 offset 對 step 取模后剩下的長度四舍五入，就是多出來的部分是否該算一步
  // Math.floor(offset / step) 計算的是 offset 中包含多少個完整的 step
  var stepNum = Math.round(offset % step / step) + Math.floor(offset / step)
  // 2、糾正后的當前高度
  var current = stepNum * step

  // 3、當前高度所占比例，由于 offset 的大小已經在進方法前經過了修正，所以這里不需要再判斷是否小于0或者大于100了
  var percent = current * 100 / (max - min)

  instance.selectComponent("#upper").setStyle({
    height: (100 - percent) + "%"
  })
  instance.selectComponent("#lower").setStyle({
    height: percent + "%"
  })
  if(state.current !== current){
    state.current = current
    changeCallback(current+min)
  }
}

module.exports = {
  propsChange: function(newValue, oldValue, ins) {
    var state = ins.getState()
    var step = newValue.step;
    var min = newValue.min;
    var max = newValue.max;
    var value = newValue.value;
    if (notInt(step) || notInt(min) || notInt(max) || notInt(value)) {
      console.log("你不把 step min max value 設成正整數，我沒法做啊")
      return
    }
    if (min > max) {
      min = oldValue.min
      max = oldValue.max
    }
    if (value > max) {
      console.log("value的值比max大，將value強制設為max")
      value = max
    } else if (value < min) {
      console.log("value的值比min小，將value強制設為min："+min)
      value = min
    }
    if (step <= 0 || (max - min) % step != 0) {
      console.log("step只能是正整數且必須被(max-min)整除，否則將step強制設為1")
      step = 1
    }
    state.min = min
    state.max = max
    state.step = step
    state.offset = value - min
    state.disabled = newValue.disabled
    state.totalTop = newValue.totalTop
    state.totalHeight = newValue.totalHeight
    if (newValue.totalTop !== null && newValue.totalHeight !== null) {
      calculate(ins, state, function(currentValue){
        ins.callMethod("setCurrent", {value: state.current + state.min})
      })
    }
  },
  tapEndPoint: function(e, ins){
    var state = ins.getState()
    if (state.disabled) return
    var percent = e.currentTarget.dataset.percent
    state.offset = (state.max - state.min) * percent
    calculate(ins, state, function (currentValue) {
      ins.triggerEvent("change", {
        value: currentValue
      })
      ins.callMethod("setCurrent", {value: currentValue})
    })
  },
  tap: function(e, ins) {
    var state = ins.getState()
    if (state.disabled) return
    // （總高度+頭部高度-點擊點高度）/ 總高度 = 點擊點在組件的位置
    // 點擊事件只在線條上，所以percent是不可能小于0，也不可能超過100%，無需另加判斷
    var percent = ( e.changedTouches[0].pageY - state.totalTop) / state.totalHeight
    state.offset = (state.max - state.min) * percent
    calculate(ins, state, function(currentValue){
      ins.triggerEvent("change", {
        value: currentValue
      })
      ins.callMethod("setCurrent", {value: currentValue})
    })
  },
  start: function(e, ins) {
    var state = ins.getState()
    if (state.disabled) return
    state.startPoint = e.changedTouches[0]
    // 本次滑動之前的高度px = 當前高度value / (最大值-最小值) * 最大高度
    var currentPx = state.current / (state.max - state.min) * state.totalHeight
    state.currentPx = currentPx
  },
  move: function(e, ins) {
    var state = ins.getState()
    if (state.disabled) return
    var startPoint = state.startPoint
    var endPoint = e.changedTouches[0]
    // 當前的高度px = 滑動之前的高度px + 起始點高度 - 當前點高度
    var currentPx = state.currentPx + endPoint.pageY - startPoint.pageY
    var percent = currentPx / state.totalHeight
    // 由于可能滑出slider范圍，所以要限制比例在 0-1之間
    percent = percent>1?1:percent
    percent = percent<0?0:percent
    state.offset = (state.max - state.min) * percent
    calculate(ins, state, function(currentValue){
      ins.triggerEvent("changing", {
        value: currentValue
      })
      ins.callMethod("setCurrent", {value: currentValue})
    })
  },
  end: function(e, ins) {
    var state = ins.getState()
    if (state.disabled) return
    ins.triggerEvent("change", {
      value: state.current + state.min
    })
  }
}

wxss:

.slider {
  height: 100%;
  padding: 30rpx 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.slider-container {
  flex: 1;
  margin: 0 20px;
  width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.slider-upper {
  flex-shrink: 0;
  height: 100%;
}
.slider-lower {
  flex-shrink: 0;
  height: 0%;
}
.slider-upper-line {
  height: 100%;
  margin: 0 12px;
  width: 2px;
}
.slider-lower-line {
  height: 100%;
  margin: 0 12px;
  width: 2px;
}
.slider-middle {
  flex-shrink: 0;
  width: 0;
  height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slider-block {
  flex-shrink: 0;
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  position: relative;
  z-index: 1;
}
.slider-value {
  flex-shrink: 0;
  pointer-events: none;
}
.slider-append {
  flex-shrink: 0;
  height: 10px;
  padding: 0 20px;
}

保存到組件

index部分

js`：

Page({
  slider1change: function (e) {
    console.log("change：",e)
  },
  slider1changing: function (e) {
    console.log("changing：",e)
  },
})

wxml：

<view >
  <slider-vertical 
    block-color="#ffffff"
    block-size="28"
    backgroundColor="#e9e9e9" 
    activeColor="#1aad19" 
    bindchange="slider1change"
    bindchanging="slider1changing"
    step="1"
    min="0" 
    max="200"
    value="0"
    disabled="{{false}}"
    show-value="{{true}}"
    ></slider-vertical>
  <slider-vertical 
    block-color="#ffffff"
    block-size="28"
    backgroundColor="#e9e9e9" 
    activeColor="#1aad19" 
    bindchange="slider1change"
    bindchanging="slider1changing"
    step="5"
    min="50" 
    max="200"
    value="115"
    disabled="{{false}}"
    show-value="{{false}}"
    ></slider-vertical>
</view>

關于“微信小程序怎么實現豎排slider效果”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“微信小程序怎么實現豎排slider效果”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。