微信小程序----slider组件
2023-09-27 14:28:57 时间
效果图
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完成一次拖动后触发!
其他
相关文章
- Hibernate 5 发行组件下载
- 微信小程序之Swiper组件
- Android开发必学:组件化与插件化的差别在哪里?内含福利
- 微信小程序组件自定义和使用
- eclipse安装findbugs及Find-sec-bugs安全组件
- 【微信小程序开发(8)---导航组件 navigator 页面跳转 open-type、 target 、 URl等属性应用】
- COM组件开发实践(七)---多线程ActiveX控件和自动调整ActiveX控件大小(上)
- 微信小程序----map组件实现(获取定位城市天气或者指定城市天气数据)
- 微信小程序----switch组件(开关选择器)
- 微信小程序----progress组件
- 微信小程序----icon组件
- 微信小程序----gallery slider(图片轮播)组件
- Vue 2.0 制作列表组件,实现分页、搜索、批量操作等
- 微信小程序Canvas增强组件—WeZRender
- 微信小程序-自定义组件
- 微信小程序实用组件:城市切换
- 微信小程序组件
- 微信小程序 自定义组件