微信小程序slider组件使用详解
2019/6/27 20:26:54
本文主要是介绍微信小程序slider组件使用详解,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
本文为大家分享了微信小程序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下载
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持找一找教程网。
这篇关于微信小程序slider组件使用详解的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist