欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-04 23:44:26
本文为大家分享了微信小程序switch开关选择器使用方法,供大家参考,具体内容如下 效果图 wxml

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。