在微信小程序中如何使用switch开关选择器

来源：动视网责编：小OO 时间：2020-11-27 19:39:24

在微信小程序中如何使用switch开关选择器

本文为大家分享了微信小程序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="；>；<；text>。

推荐度：

点击下载本文 文档为doc格式

导读本文为大家分享了微信小程序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="；>；<；text>。

这篇文章主要为大家详细介绍了微信小程序switch开关选择器的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文为大家分享了微信小程序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>

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下拉框中第一个值