微信小程序 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 相关文章推荐
js资料prototype 属性
Mar 13 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
Dec 30 Javascript
JS 作用域与作用域链详解
Apr 07 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
May 05 Javascript
Javascript必知必会(四)js类型转换
Jun 08 Javascript
jQuery旋转插件jqueryrotate用法详解
Oct 13 Javascript
Vue计算属性的使用
Aug 04 Javascript
element-ui 上传图片后清空图片显示的实例
Sep 04 Javascript
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
js实现弹出框的拖拽效果实例代码详解
Apr 16 Javascript
vue props 一次传多个值实例
Jul 22 Javascript
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
微信小程序 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
让你的网站首页自动选择语言转跳
2006/12/06 PHP
php下实现农历日历的代码
2007/03/07 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
js jquery做的图片连续滚动代码
2008/01/06 Javascript
js获取下拉列表的值和元素个数示例
2014/05/07 Javascript
一个判断抢购时间是否到达的简单的js函数
2014/06/23 Javascript
javascript实现复制与粘贴操作实例
2014/10/16 Javascript
js创建对象的方式总结
2015/01/10 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
2016/01/21 Javascript
解析Vue2.0双向绑定实现原理
2017/02/23 Javascript
JS实现方形抽奖效果
2018/08/27 Javascript
vue输入节流,避免实时请求接口的实例代码
2019/10/30 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
2020/06/19 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
javascript实现移动端触屏拖拽功能
2020/07/29 Javascript
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
python处理cookie详解
2014/02/07 Python
python实现JAVA源代码从ANSI到UTF-8的批量转换方法
2015/08/10 Python
Python对数据库操作
2016/03/28 Python
Python面向对象特殊成员
2017/04/24 Python
mac下pycharm设置python版本的图文教程
2018/06/13 Python
Python如何发布程序的详细教程
2018/10/09 Python
python 获取图片分辨率的方法
2019/01/08 Python
python爬虫开发之Request模块从安装到详细使用方法与实例全解
2020/03/09 Python
Python matplotlib读取excel数据并用for循环画多个子图subplot操作
2020/07/14 Python
python 监控服务器是否有人远程登录(详细思路+代码)
2020/12/18 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
DC Shoes俄罗斯官网:美国滑板鞋和服饰品牌
2020/08/19 全球购物
中班开学寄语
2014/04/04 职场文书
一年级语文下册复习计划
2015/01/17 职场文书
2016中学教师读书心得体会
2016/01/13 职场文书
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server
Oracle 死锁的检测查询及处理
2021/09/25 Oracle
使用CSS实现一个搜索引擎的原理解析
2021/09/25 HTML / CSS