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


Posted in Javascript onJanuary 31, 2018

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

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

Javascript 相关文章推荐
你的 mixin 真的兼容 ECMAScript 5 吗?
Apr 11 Javascript
没有document.getElementByName方法
Aug 19 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 Javascript
jQuery 实现评论等级好评差评特效
May 06 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 Javascript
详解webpack的配置文件entry与output
Aug 21 Javascript
获取layer.open弹出层的返回值方法
Aug 20 Javascript
JavaScript学习笔记之DOM操作实例分析
Jan 08 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
Apr 29 Javascript
js实现简单扫雷
Nov 27 Javascript
js canvas实现俄罗斯方块
Oct 11 Javascript
详解Angular调试技巧之报错404(not found)
Jan 31 #Javascript
微信小程序slider组件使用详解
Jan 31 #Javascript
vue项目实现记住密码到cookie功能示例(附源码)
Jan 31 #Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
Jan 31 #Javascript
微信小程序progress组件使用详解
Jan 31 #Javascript
微信小程序button组件使用详解
Jan 31 #Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
Jan 31 #Javascript
You might like
php smarty模版引擎中变量操作符及使用方法
2009/12/11 PHP
跟我学Laravel之请求与输入
2014/10/15 PHP
PHP实现搜索相似图片
2015/09/22 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
laravel-admin的图片删除实例
2019/09/30 PHP
JavaScript 的方法重载效果
2009/08/07 Javascript
js 金额文本框实现代码
2012/02/14 Javascript
js对文章内容进行分页示例代码
2014/03/05 Javascript
如何在Linux上安装Node.js
2016/04/01 Javascript
JavaScript的Backbone.js框架入门学习指引
2016/05/07 Javascript
深入理解JavaScript 函数
2016/06/06 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
AngularJS框架的ng-app指令与自动加载实现方法分析
2017/01/04 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
如何正确理解javascript的模块化
2017/03/02 Javascript
Javascript中八种遍历方法的执行速度深度对比
2017/04/25 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
2019/04/17 Javascript
Vue使用lodop实现打印小结
2019/07/06 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
vue实现瀑布流组件滑动加载更多
2020/03/10 Javascript
vue使用video插件vue-video-player的示例
2020/10/03 Javascript
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
python显示生日是星期几的方法
2015/05/27 Python
基于python实现高速视频传输程序
2019/05/05 Python
html5绘制时钟动画
2014/12/15 HTML / CSS
ASOS西班牙官网:英国在线时尚和美容零售商
2020/01/10 全球购物
元旦联欢会主持词
2014/03/26 职场文书
医师定期考核实施方案
2014/05/07 职场文书
预防艾滋病宣传标语
2014/06/25 职场文书
2014年采购部工作总结
2014/11/20 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书
运动会闭幕式主持词
2015/07/01 职场文书
幼儿教师远程研修感悟
2015/11/18 职场文书
学生会副主席竞选稿
2015/11/19 职场文书
原生JS中应该禁止出现的写法
2021/05/05 Javascript
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL