在微信小程序中如何使用switch开关选择器
程序员文章站
2022-03-26 11:36:17
...
这篇文章主要为大家详细介绍了微信小程序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>
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
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
在JavaScript中如何实现获取select下拉框中第一个值
以上就是在微信小程序中如何使用switch开关选择器的详细内容,更多请关注其它相关文章!
上一篇: UETool大战饿了么!
下一篇: 计算机系统漫游 笔记