实现效果：
zy-slider标签是封装的自定义组件
我放到了资源这里地址：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"
}
}
| 参数 | 说明 |
|---|---|
| min | Number/String slider 最小值 |
| max | Number/String slider 最大值 |
| minValue | Number/String slider 左边滑块初始位置 |
| maxValue | Number/String slider 右边滑块初始位置 |
| bind:lowValueChange | function 左边滑块回调 {lowValue：lowValue} |
| bind:heighValueChange | function 右边滑块回调 {heighValue：heighValue} |
绑定方法
lowValueChangeAction: function (e) {
this.setData({
low:e.detail.lowValue
})
},
heighValueChangeAction: function (e) {
this.setData({
heigh: e.detail.heighValue
})
},
刻度线需要单独去写：文章来源：https://www.toymoban.com/news/detail-499481.html
<view class="numList">
<view class="num_tem" wx:for="{{[0,1,2,3,4,5,6,7]}}"></view>
</view>
css文章来源地址https://www.toymoban.com/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;
}
到了这里，关于微信小程序自定义slider组件实现双向滑块的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
