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,val