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() // 由于顯示數(shù)字后，滑動(dòng)區(qū)域變化，需要重新查詢可滑動(dòng)高度
? ? }
? },
? 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(){},
? }
})

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

<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" style="background-color: {{activeColor}}"></view>
? ? </view>
? ? <view class="slider-middle">
? ? ? <view?
? ? ? ? class="slider-block"?
? ? ? ? style="background-color:{{blockColor}};box-shadow:{{blockColor=='#ffffff'?'0 0 2px 2px rgba(0,0,0,0.2)':'none'}};width:{{blockSize}}px;height:{{blockSize}}px"?
? ? ? ? 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" style="background-color: {{backgroundColor}}"></view>
? ? </view>
? </view>
? <view class="slider-append" data-percent="1" bindtap="{{eventHandle.tapEndPoint}}"></view>
? <view class="slider-value" wx:if="{{showValue}}">{{currentValue}}</view>
</view>

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

? // 3、當(dāng)前高度所占比例，由于 offset 的大小已經(jīng)在進(jìn)方法前經(jīng)過了修正，所以這里不需要再判斷是否小于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 設(shè)成正整數(shù)，我沒法做啊")
? ? ? return
? ? }
? ? if (min > max) {
? ? ? min = oldValue.min
? ? ? max = oldValue.max
? ? }
? ? if (value > max) {
? ? ? console.log("value的值比max大，將value強(qiáng)制設(shè)為max")
? ? ? value = max
? ? } else if (value < min) {
? ? ? console.log("value的值比min小，將value強(qiáng)制設(shè)為min："+min)
? ? ? value = min
? ? }
? ? if (step <= 0 || (max - min) % step != 0) {
? ? ? console.log("step只能是正整數(shù)且必須被(max-min)整除，否則將step強(qiáng)制設(shè)為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
? ? // （總高度+頭部高度-點(diǎn)擊點(diǎn)高度）/ 總高度 = 點(diǎn)擊點(diǎn)在組件的位置
? ? // 點(diǎn)擊事件只在線條上，所以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]
? ? // 本次滑動(dòng)之前的高度px = 當(dāng)前高度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]
? ? // 當(dāng)前的高度px = 滑動(dòng)之前的高度px + 起始點(diǎn)高度 - 當(dāng)前點(diǎn)高度
? ? 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
? ? })
? }
}

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

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

<view style="height: 400rpx;margin: 20px;display: flex;justify-content: space-around">
? <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>