本文實例講述了微信小程序使用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組件的詳細說明與使用方法可參考官網:
https://mp.weixin.qq.com/debug/wxadoc/dev/component/slider.html
https://mp.weixin.qq.com/debug/wxadoc/dev/component/switch.html
希望本文所述對大家微信小程序開發有所幫助。
新聞熱點
疑難解答