實現(xiàn)效果：
zy-slider標(biāo)簽是封裝的自定義組件
我放到了資源這里地址：https://download.csdn.net/download/Axiaoheng_/86399342?spm=1001.2014.3001.5503
wxml引入
<view class="zy-slider">
<zy-slider id="zy-slider"
minValue="0"
maxValue="0" min="0" max="100"
bind:lowValueChange="lowValueChangeAction"
bind:heighValueChange="heighValueChangeAction" />
</view>
{
"usingComponents": {
"zy-slider": "../../component/zyslider"
}
}
| 參數(shù) | 說明 |
|---|---|
| min | Number/String slider 最小值 |
| max | Number/String slider 最大值 |
| minValue | Number/String slider 左邊滑塊初始位置 |
| maxValue | Number/String slider 右邊滑塊初始位置 |
| bind:lowValueChange | function 左邊滑塊回調(diào) {lowValue：lowValue} |
| bind:heighValueChange | function 右邊滑塊回調(diào) {heighValue：heighValue} |
綁定方法
lowValueChangeAction: function (e) {
this.setData({
low:e.detail.lowValue
})
},
heighValueChangeAction: function (e) {
this.setData({
heigh: e.detail.heighValue
})
},
刻度線需要單獨去寫：文章來源：http://www.zghlxwxcb.cn/news/detail-499481.html
<view class="numList">
<view class="num_tem" wx:for="{{[0,1,2,3,4,5,6,7]}}"></view>
</view>
css文章來源地址http://www.zghlxwxcb.cn/news/detail-499481.html
.zy-slider {
position: relative;
}
.numList{
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
padding: 0 44rpx 0rpx 34rpx;
box-sizing: border-box;
position: relative;
top: 40rpx;
}
.numList .num_tem{
background: #677a94;
width: 2rpx;
height: 10rpx;
}
到了這里，關(guān)于微信小程序自定義slider組件實現(xiàn)雙向滑塊的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
