微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
程序员文章站
2022-06-24 21:17:55
本文实例讲述了微信小程序使用slider设置数据值及switch开关组件功能。分享给大家供大家参考,具体如下:
1、效果展示
2、关键代码
① index.wxm...
本文实例讲述了微信小程序使用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组件的详细说明与使用方法可参考官网:
希望本文所述对大家微信小程序开发有所帮助。
上一篇: 很有趣的脑筋急转弯.
下一篇: C语言编程开发之C语言Bit位定义