本文实例讲述了微信小程序使用slider设置数据值及switch开关组件功能。分享给大家供大家参考,具体如下:
1、效果展示
2、关键代码
① index.wxml
<view>微信小程序组件:滑动选择器slider</view> <slider bindchange="sliderbindchange" min="{{min}}" max="{{max}}" show-value/> <view>最小值:{{min}}</view> <view>最大值:{{max}}</view> <view>当前值:{{text}}</view> <view>---------------------------------</view> <view>微信小程序组件:开关组件switch</view> <switch checked type="switch" bindchange="switchbindchange"/> <view>开关组件当前状态:{{switchstate}}</view>
② index.js
page({ data:{ // text:"这是一个页面" min:'20', max:'150', text:'', switchstate:'开' }, sliderbindchange:function(e){ this.setdata({ text:e.detail.value }) }, switchbindchange:function(e){ if(e.detail.value){ this.setdata({ switchstate:'开' }) }else{ this.setdata({ switchstate:'关' }) } } })
3、源代码点击此处。
关于slider与switch组件的详细说明与使用方法可参考官网:
希望本文所述对大家微信小程序开发有所帮助。
如对本文有疑问, 点击进行留言回复!!
javascript从入门到跑路-----小文的js学习笔记(19)------- js的垃圾回收机制
Agora 开源 | 一个 Demo,帮你快速实现社交直播四大场景
网友评论