本文为大家分享了微信小程序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
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在js中如何实现offset和匀速动画
在bootstrap中如何实现表格合并单元格
在javascript中如何实现获取select下拉框中第一个值
以上就是在微信小程序中如何使用switch开关选择器的详细内容。