微信小程序slider组件使用详解
程序员文章站
2022-04-03 08:18:31
本文为大家分享了微信小程序slider组件的使用方法，供大家参考，具体内容如下
效果图
wxml
本文为大家分享了微信小程序slider组件的使用方法，供大家参考，具体内容如下
效果图
wxml
<view class="tui-content">
<view class="tui-slider-head">设置step,当前设置步伐为5,当前值：{{slider1}}</view>
<view class="tui-slider-box">
<slider bindchange="changeslider1" step="5" value="{{slider1}}"/>
</view>
</view>
<view class="tui-content">
<view class="tui-slider-head">是否在右侧显示当前值</view>
<view class="tui-slider-box">
<slider bindchange="changeslider2" value="{{slider2}}" show-value/>
</view>
</view>
<view class="tui-content">
<view class="tui-slider-head">设置最大值、最小值</view>
<view class="tui-slider-box">
<slider bindchange="changeslider3" min="20" max="90" value="{{slider3}}" show-value/>
</view>
</view>
<view class="tui-content">
<view class="tui-slider-head">滑动选择器设置名称</view>
<view class="tui-slider-box">
<view class="tui-fl">
选择
</view>
<view class="tui-fl">
{{slider4}}
</view>
<view style="overflow:hidden">
<slider bindchanging="changeslider4" value="{{slider4}}"/>
</view>
</view>
</view>
wxss
.tui-slider-head,.tui-slider-box{
height: 80rpx;
line-height: 80rpx;
font-size: 35rpx;
color: #666;
}
js
page({
data: {
slider1: 50,
slider2: 50,
slider3: 50,
slider4: 50
},
changeslider1(e) {
this.setdata({ slider1: e.detail.value })
},
changeslider2(e){
this.setdata({ slider2: e.detail.value})
},
changeslider3(e) {
this.setdata({ slider3: e.detail.value })
},
changeslider4(e) {
this.setdata({ slider4: e.detail.value })
}
})
注意：slider组件的两个事件：bindchanging拖动过程中触发，bindchange完成一次拖动后触发！
demo下载
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： SSLOJ 1335.蛋糕切割【规律】
下一篇： iOS15如何开启背景音功能减少干扰