微信小程序switch开关选择器使用详解
程序员文章站
2022-07-04 23:44:26
本文为大家分享了微信小程序switch开关选择器使用方法,供大家参考,具体内容如下
效果图
wxml
本文为大家分享了微信小程序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下载
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: Python面向对象之继承代码详解
下一篇: IPC之哲学家进餐问题