微信小程序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 相关文章推荐
Jquery实现地铁线路指示灯提示牌效果的方法
Mar 02 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
Dec 20 Javascript
微信小程序 picker-view 组件详解及简单实例
Jan 10 Javascript
JS实现DIV高度自适应窗口示例
Feb 16 Javascript
javaScript 逻辑运算符使用技巧整理
May 03 Javascript
Js实现京东无延迟菜单效果实例(demo)
Jun 02 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
Aug 23 Javascript
webpack打包react项目的实现方法
Jun 21 Javascript
微信小程序实现页面浮动导航
Jan 28 Javascript
js中async函数结合promise的小案例浅析
Apr 14 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
Aug 21 Javascript
js实现搜索提示框效果
Sep 05 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事务处理实例详解
2014/07/11 PHP
PHP JSON出错:Cannot use object of type stdClass as array解决方法
2014/08/16 PHP
Yii2使用自带的UploadedFile实现的文件上传
2016/06/20 PHP
PHP中-&gt;和=&gt;的含义及使用示例解析
2020/08/06 PHP
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
JQuery中$之选择器用法介绍
2011/04/05 Javascript
JS原型对象通俗&quot;唱法&quot;
2012/12/27 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
2013/04/26 Javascript
js中判断对象是否为空的三种实现方法
2013/12/23 Javascript
JS嵌套函数调用上下文的问题解决
2014/03/26 Javascript
JavaScript关于提高网站性能的几点建议(一)
2016/07/24 Javascript
JavaScript探测CSS动画是否已经完成的方法
2016/08/30 Javascript
Nodejs--post的公式详解
2017/04/29 NodeJs
原生JS实现小小的音乐播放器
2017/10/16 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
2020/11/13 Javascript
JS实现可以用键盘方向键控制的动画
2020/12/11 Javascript
[02:00]DOTA2英雄COSPLAY闹市街头巡游助威2015国际邀请赛
2015/08/02 DOTA
[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
Django实现快速分页的方法实例
2017/10/22 Python
浅谈机器学习需要的了解的十大算法
2017/12/15 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
java中两个byte数组实现合并的示例
2018/05/09 Python
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
详解Python静态网页爬取获取高清壁纸
2019/04/23 Python
django 连接数据库 sqlite的例子
2019/08/14 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
一个基于canvas的移动端图片编辑器的实现
2020/10/28 HTML / CSS
苹果台湾官网:Apple台湾
2019/01/05 全球购物
小区门卫管理制度
2014/01/29 职场文书
2014年五四青年节活动方案
2014/03/29 职场文书
银行柜员求职自荐书
2014/06/18 职场文书
教室标语大全
2014/06/21 职场文书
2016同学毕业寄语大全
2015/12/04 职场文书