微信小程序 switch组件详解及简单实例


Posted in Javascript onJanuary 10, 2017

微信小程序switch

相关文章:

微信小程序 Button

微信小程序 radio

微信小程序 slider

微信小程序 switch

微信小程序 textarea

微信小程序 picker-view

微信小程序 picker

微信小程序 label

微信小程序 input 

微信小程序 form

微信小程序 checkbox

实现效果图:

微信小程序 switch组件详解及简单实例

开关选择器

属性名 类型 默认值 说明
checked Boolean false 是否选中
disabled Boolean false 是否禁用
type String switch 样式,有效值:switch, checkbox
bindchange EventHandle   checked改变时触发change事件,event.detail={ value:checked}

示例代码:

<view class="section section_gap">
 <view class="section__title">type="switch"</view>
 <view class="body-view">
 <switch checked="{{switch1Checked}}" bindchange="switch1Change"/>
 </view>
</view>

<view class="section section_gap">
 <view class="section__title">type="checkbox"</view>
 <view class="body-view">
 <switch type="checkbox" checked="{{switch2Checked}}" bindchange="switch2Change"/>
 </view>
</view>
var pageData = {
 data: {
 switch1Checked: true,
 switch2Checked: false,
 switch1Style: '',
 switch2Style: 'text-decoration: line-through'
 }
}
for(var i = 1; i <= 2; ++i) {
 (function(index) {
 pageData[`switch${index}Change`] = function(e) {
 console.log(`switch${index}发生change事件,携带值为`, e.detail.value)
 var obj = {}
 obj[`switch${index}Checked`] = e.detail.value
 this.setData(obj)
 obj = {}
 obj[`switch${index}Style`] = e.detail.value ? '' : 'text-decoration: line-through'
 this.setData(obj)
 }
 })(i)
}
Page(pageData)

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
wap浏览自动跳转到wap页面的js代码
May 17 Javascript
实现js保留小数点后N位的代码
Nov 13 Javascript
JS判断是否360安全浏览器极速内核的方法
Jan 29 Javascript
javascript中传统事件与现代事件
Jun 23 Javascript
超赞的jQuery图片滑块动画特效代码汇总
Jan 25 Javascript
jQuery实现日期联动效果实例
Jul 26 Javascript
浅析js的模块化编写 require.js
Dec 07 Javascript
详解JS去重及字符串奇数位小写转大写
Dec 29 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
Aug 09 Javascript
vue缓存的keepalive页面刷新数据的方法
Apr 23 Javascript
vue-cli3中配置alias和打包加hash值操作
Sep 04 Javascript
JavaScript实现鼠标移入随机变换颜色
Nov 24 Javascript
微信小程序 textarea 组件详解及简单实例
Jan 10 #Javascript
微信小程序 picker-view 组件详解及简单实例
Jan 10 #Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 #Javascript
微信小程序 label 组件详解及简单实例
Jan 10 #Javascript
实现一个简单的vue无限加载指令方法
Jan 10 #Javascript
微信小程序 input输入框详解及简单实例
Jan 10 #Javascript
微信小程序 form组件详解及简单实例
Jan 10 #Javascript
You might like
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
php和html的区别点详细总结
2019/09/24 PHP
浅析js封装和作用域
2013/07/09 Javascript
仿百度的关键词匹配搜索示例
2013/09/25 Javascript
Angular中的Promise对象($q介绍)
2015/03/03 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
2016/01/08 Javascript
JS中frameset框架弹出层实例代码
2016/04/01 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
JavaScript模块化之使用requireJS按需加载
2017/04/12 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
vue axios请求超时的正确处理方法
2018/04/02 Javascript
vue开发环境配置跨域的方法步骤
2019/01/16 Javascript
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
详解node和ES6的模块导出与导入
2020/02/19 Javascript
Vue组件化开发之通用型弹出框的实现
2020/02/28 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
详解vue路由
2020/08/05 Javascript
node中短信api实现验证码登录的示例代码
2021/01/20 Javascript
python实现多人聊天室
2020/03/31 Python
python 获取微信好友列表的方法(微信web)
2019/02/21 Python
使用python爬取抖音视频列表信息
2019/07/15 Python
Python configparser模块配置文件过程解析
2020/03/03 Python
TensorFlow Autodiff自动微分详解
2020/07/06 Python
HTML5+lufylegend实现游戏中的卷轴
2016/02/29 HTML / CSS
Sunglasses Shop荷兰站:英国最大的太阳镜独立在线零售商和供应商
2017/01/08 全球购物
日本化妆品植村秀俄罗斯官方网站:Shu Uemura俄罗斯
2020/02/01 全球购物
哈萨克斯坦移动和数字技术在线商店:SatelOnline.kz
2020/09/04 全球购物
知识竞赛主持词
2014/03/26 职场文书
青年文明号口号
2014/06/17 职场文书
2015年学校安全管理工作总结
2015/05/11 职场文书
教你怎么用Python实现GIF动图的提取及合成
2021/06/15 Python
java泛型通配符详解
2021/07/25 Java/Android
Nginx反向代理、重定向
2022/04/13 Servers
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS