当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 微信小程序switch开关选择器使用详解

微信小程序switch开关选择器使用详解

2018年02月08日  | 移动技术网IT编程  | 我要评论

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

demo

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网