本文为大家分享了微信小程序switch开关选择器使用方法,供大家参考,具体内容如下
效果图
WXML
<view class="tui-list-box"> <view class="tui-menu-list"> <text>状态:{{isChecked1}}</text> <switch class="tui-fr" checked="{{isChecked1}}" bindchange="changeSwitch1"/> </view> <view class="tui-menu-list"> <text>状态:{{isChecked2}}</text> <switch class="tui-fr" checked="{{isChecked2}}" bindchange="changeSwitch2"/> </view> <view class="tui-menu-list"> <text>状态:{{isChecked3}}</text> <switch class="tui-fr" color="#007aff" checked="{{isChecked3}}" bindchange="changeSwitch3"/> </view> <view class="tui-menu-list"> <text>状态:{{isChecked4}}</text> <switch class="tui-fr" color="#007aff" checked="{{isChecked4}}" bindchange="changeSwitch4"/> </view> <view class="tui-menu-list"> <text>状态:{{isChecked5}}</text> <switch class="tui-fr" type="checkbox" checked="{{isChecked5}}" bindchange="changeSwitch5"/> </view> <view class="tui-menu-list"> <text>状态:{{isChecked6}}</text> <switch class="tui-fr" type="checkbox" checked="{{isChecked6}}" bindchange="changeSwitch6"/> </view> </view>
JS
var pageObj = { data: { isChecked1: false, isChecked2: true, isChecked3: false, isChecked4: true, isChecked5: false, isChecked6: true } }; for (var i = 0; i < 7; ++i) { (function (i) { pageObj['changeSwitch' + i] = function (e) { var changedData = {}; changedData['isChecked' + i] = !this.data['isChecked' + i]; this.setData(changedData); } })(i) } Page(pageObj);
switch组件的属性
- checked:是否选中—-false、true
- type:开关选择器的样式—-switch, checkbox
- color:switch 的颜色,同 css 的 color
DEMO下载
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年11月18日
2024年11月18日
- 群星《天域原音·聆听雪域藏歌STS+SRS》[WAV+CUE]
- 尤长靖.2020-AZORAland·我是尤长靖【香蕉娱乐】【FLAC分轨】
- 群星.1995-台北爱情故事【飞碟】【WAV+CUE】
- 群星.2024-锦绣安宁电视剧原声带【D-Jin.Music】【FLAC分轨】
- 群星《闪光的夏天 第4期》[320K/MP3][97.82MB]
- 群星《闪光的夏天 第4期》[FLAC/分轨][553.31MB]
- 群星《奔赴!万人现场 第4期》[320K/MP3][80.75MB]
- 林琳《独角戏HQ》WAV
- FIM-《Super-Sound-3》声霸3[WAV+CUE]
- 喇叭花-绝版天碟《我的碟“MyDisc”》[正版原抓WAV+CUE]
- 陈慧琳.1999-真感觉【正东】【WAV+CUE】
- 徐玮.1986-走自己的路(喜玛拉雅复刻版)【同心圆】【WAV+CUE】
- 林海峰.2003-我撑你【EMI百代】【WAV+CUE】
- 群星《奔赴!万人现场 第4期》[FLAC/分轨][454.89MB]
- 腾讯音乐人《未来立体声·Stereo Future VOL.12》[320K/MP3][62.37MB]