本文为大家分享了微信小程序滑块组件的使用方法,供大家参考,具体内容如下
效果图
WXML
& lt;视图类=皌ui-content”比;
& lt;视图类=" tui-slider-head "祝辞设置步骤,当前设置步伐为5,当前值:{{slider1}} & lt;/view>
& lt;视图类=皌ui-slider-box”比;
& lt;滑块bindchange==?”“changeSlider1”一步value=" https://www.yisu.com/zixun/{{slider1}} "/比;
& lt;/view>
& lt;/view>
& lt;视图类=皌ui-content”比;
& lt;视图类=" tui-slider-head "祝辞是否在右侧显示当前值& lt;/view>
& lt;视图类=皌ui-slider-box”比;
& lt;滑块bindchange=" changeSlider2 " value=" https://www.yisu.com/zixun/{{slider2}}”显示值/比;
& lt;/view>
& lt;/view>
& lt;视图类=皌ui-content”比;
& lt;视图类=" tui-slider-head "祝辞设置最大值,最小值& lt;/view>
& lt;视图类=皌ui-slider-box”比;
& lt;滑块bindchange=" changeSlider3 " min=" 20 " max=" 90 " value=" https://www.yisu.com/zixun/{{slider3}}”显示值/比;
& lt;/view>
& lt;/view>
& lt;视图类=皌ui-content”比;
& lt;视图类=" tui-slider-head "祝辞滑动选择器设置名称& lt;/view>
& lt;视图类=皌ui-slider-box”比;
& lt;视图类=皌ui-fl”比;
选择
& lt;/view>
& lt;视图类=皌ui-fl”比;
{{slider4}}
& lt;/view>
& lt;视图比;
& lt;滑块bindchanging=" changeSlider4 " value=" https://www.yisu.com/zixun/{{slider4}} "/比;
& lt;/view>
& lt;/view>
& lt;/view>
之前
wxs
.tui-slider-head .tui-slider-box {
身高:80 rpx;
行高:80 rpx;
字体大小:35 rpx;
颜色:# 666;
}
之前
JS
页面({
数据:{
slider1: 50,
slider2: 50,
slider3: 50,
slider4: 50
}，
changeSlider1 (e) {
这一点。setData ({slider1: e.detail.value})
}，
changeSlider2 (e) {
这一点。setData ({slider2: e.detail.value})
}，
changeSlider3 (e) {
这一点。setData ({slider3: e.detail.value})
}，
changeSlider4 (e) {
这一点。setData ({slider4: e.detail.value})
}
}）
之前
注意:滑块组件的两个事件:bindchanging拖动过程中触发,bindchange完成一次拖动后触发!
演示下载
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
