WeChat applet switch selector Usage Details, switch selector

The usage of the switch selector of the applet is described in detail.

This article shares with you how to use the switch selector of the applet for your reference. The specific content is as follows:

WXML

<View class = "tui-list-box"> <view class = "tui-menu-list"> <text> Status: {isChecked1 }}</text> <switch class = "tui-fr" checked = "{isChecked1 }}" bindchange =" changeSwitch1 "/> </view> <view class = "tui-menu-list"> <text> Status: {isChecked2 }}</text> <switch class = "tui-fr" checked = "{isChecked2 }}" bindchange =" changeSwitch2 "/> </view> <view class = "tui-menu-list"> <text> Status: {isChecked3 }}</text> <switch class = "tui-fr" color = "# 007aff" checked = "{isChecked3 }}" bindchange =" changeSwitch3 "/> </view> <view class = "tui-menu-list"> <text> Status: {isChecked4 }}</text> <switch class = "tui-fr" color = "# 007aff" checked = "{isChecked4 }}" bindchange =" changeswitc4"/> </view> <view class = "tui-menu-list"> <text> Status: {isChecked5 }}</text> <switch class = "tui-fr" type = "checkbox" checked = "{isChecked5 }}" bindchange =" changeSwitch5 "/> </view> <view class = "tui-menu-list"> <text> Status: {isChecked6 }}</text> <switch class = "tui-fr" type = "checkbox" checked = "{isChecked6 }}" bindchange =" changeSwitch6 "/> </text> /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 component attributes

• Checked: whether to select -- false, true
• Type: the style of the switch selector -- switch, checkbox
• Color: switch color, which is the same as css color.

Download DEMO

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.