微信小程序slider组件使用详解

微信小程序slider组件使用详解

本文为大家分享了微信小程序slider组件的使用方法，供大家参考，具体内容如下

效果图

WXML

设置step,当前设置步伐为5,当前值：{{slider1}}

是否在右侧显示当前值

设置最大值、最小值

滑动选择器设置名称

选择

{{slider4}}

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下载

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。