Home > Article > Web Front-end > How to use switch selector in WeChat applet
This article mainly introduces the use of the switch selector of the WeChat applet in detail. It has certain reference value. Interested friends can refer to it.
This article shares with you the WeChat applet switch selector. How to use the program switch switch selector is for your reference. The specific content is as follows
Rendering
##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);Attributes of the switch component
How to implement offset and uniform animation in JS
How to implement table merge cells in Bootstrap
How to get the first value in the select drop-down box in JavaScript
The above is the detailed content of How to use switch selector in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!