微信小程序组件解读和分析:十五、switch 开关选择器
switch 开关选择器组件说明:
switch,开关选择器。只能选择或者不选。这种属于表单控件或者查询条件控件。
switch 开关选择器示例代码运行效果如下:
下面是WXML代码:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
< view class = "section section" > < text class = "title" >switch style</ text > < view class = "body-view" > < switch checked bindchange = "switch1Change" /> </ view > </ view > < view class = "section section" > < text class = "title" >switch style</ text > < view class = "body-view" > < switch bindchange = "switch2Change" /> </ view > </ view > < view class = "section section" > < text class = "title" >checkbox style</ text > < view class = "body-view" > < switch type = "checkbox" checked bindchange = "switch1Change" /> </ view > </ view > < view class = "section section" > < text class = "title" >checkbox style</ text > < view class = "body-view" > < switch type = "checkbox" bindchange = "switch2Change" /> </ view > </ view > < view class = "section section" > < text class = "title" >西游记里都有谁</ text > < view class = "body-view" > < switch type = "checkbox" checked bindchange = "switch2Change" />< text class = "title" >牛魔王</ text > </ view > < view class = "body-view" > < switch type = "checkbox" checked bindchange = "switch2Change" />< text class = "title" >孙悟空</ text > </ view > < view class = "body-view" > < switch type = "checkbox" checked bindchange = "switch2Change" />< text class = "title" >猪八戒</ text > </ view > < view class = "body-view" > < switch type = "checkbox" bindchange = "switch2Change" />< text class = "title" >旗木卡卡西</ text > </ view > </ view > |
下面是JS代码:
1
2
3
4
5
6
7
8
|
Page({ switch1Change: function (e){ console.log( 'switch1 发生 change 事件,携带值为' , e.detail.value) }, switch2Change: function (e){ console.log( 'switch2 发生 change 事件,携带值为' , e.detail.value) } }) |
下面是WXSS代码:
1
2
3
4
5
6
7
|
.page { min-height : 100% ; flex: 1 ; background-color : #FBF9FE ; font-size : 32 rpx; overflow : hidden ; } |
switch 开关选择器的主要属性
属性名
|
类型
|
默认值
|
说明
|
checked | Boolean | false | 是否选中 |
type | String | switch | 样式,有效值:switch, checkbox |
bindchange | EventHandle | checked改变时触发change事件,event.detail={ value:checked} |
个人经验:适用于选择一单项选择true和false,不建议用checkbox样式
这个适用于选择一单项选择true和false,不建议使用checkbox样式。因为checkbox控件已经有了。而且,这种用checkbox样式时,没有带后面的文本,图片上文本是我拼凑的,还没有加控制事件(不应该这么用)
微信小程序组件解读和分析:十五、switch 开关选择器的更多相关文章
- 微信小程序组件解读和分析:五、text文本
text文本组件说明: text 文本就是微信小程序中显示出来的文本. text文本组件的示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 1 2 3 4 <v ...
- 微信小程序组件解读和分析:六、progress进度条
progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行.progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pro ...
- 微信小程序组件解读和分析:四、icon图标
icon图标组件说明: icon是一种图标格式,用于系统图标.软件图标等,这种图标扩展名为.icon..ico.常见的软件或windows桌面上的那些图标一般都是ICON格式的.在应用上面很多地方 ...
- 微信小程序组件解读和分析:九、form表单
form表单组件说明: 表单,将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/ ...
- 微信小程序组件解读和分析:十四、slider滑动选择器
slider滑动选择器组件说明: 滑动选择器. slider滑动选择器示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 ...
- 微信小程序组件解读和分析:十、input输入框
input输入框组件说明: 本文介绍input 输入框的各种参数及特性. input输入框示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 01 02 03 04 0 ...
- 微信小程序组件解读和分析:十二、picker滚动选择器
picker滚动选择器组件说明: picker: 滚动选择器,现支持三种选择器,通过mode属性来区分, 分别是普通选择器(mode = selector),时间选择器(mode = time),日期 ...
- 微信小程序组件解读和分析:八、checkbox复选项
checkbox复选项组件说明: checkbox是小程序表单组件中的一个组件,作用是在表单中引导用户做出选择. 要使用checkbox组件,还需要在同组中所有的checkbox标签外使用checkb ...
- 微信小程序组件解读和分析:一、view(视图容器 )
view组件说明: 视图容器 跟HTML代码中的DIV一样,可以包裹其他的组件,也可以被包裹在其他的组件内部.用起来比较自由随意,没有固定的结构. view组件的用法: 示例项目的wxml ...
随机推荐
- Matplotlib绘图基础
import matplotlib.pyplot as plt import numpy as np #绘图流程 x=np.linspace(-1,1,100) y=x**2 plt.plot(x,y ...
- createElement与innerHtml性能比較
js中.动态加入html的方法大致就是两种,一种是document.createElement等方法创建,然后使用Element.appendChild加入,或者是使用Element.innerHTM ...
- jquery源码学习笔记一:总体结构
练武不练功,到老一场空.计算机也一样. 计算机的功,就是原理.如果程序员只会使用各种函数,各种框架,而不知其原理,顶多熟练工人而已.知其然,更要知其所以然. jquery我们用得很爽,但它究竟咋实现的 ...
- Flame Graphs
http://www.brendangregg.com/flamegraphs.html Flame graphs are a visualization of profiled software, ...
- 比特币交易(Transaction)的输入与输出
比特币通过“挖矿”机制保证了不能任意造币.通过分布式网络和HashCash机制解决双重支付问题.事实上比特币系统中不存在独立的电子货币,而只存在交易单(账单),货币值是依附于交易单存在的,所以比特币中 ...
- 【POJ 1947】 Rebuilding Roads
[题目链接] 点击打开链接 [算法] f[i][j]表示以i为根的子树中,最少删多少条边可以组成j个节点的子树 树上背包,即可 [代码] #include <algorithm> #inc ...
- Git 仓库结构 (一)***
Git 仓库 1.1Git 基本概念 在Git中,我们将需要进行版本控制的文件目录叫做一个仓库(repository),每个仓库可以简单理解成一个目录,这个目录里面的所有文件都通过Gi ...
- 《JAVA与模式》之解释器模式
解释器模式是类的行为模式.给定一个语言之后,解释器模式可以定义出其文法的一种表示,并同时提供一个解释器.客户端可以使用这个解释器来解释这个语言中的句子. 解释器模式的结构 下面就以一个示意性的系统为例 ...
- char-rnn-tensorflow源码解析及结构流程分析
char-rnn-tensorflow由飞飞弟子karpathy编写,展示了如何用tensorflow来搭建一个基本的RNN(LSTM)网络,并进行基于char的seq2seq进行训练. 数据读取部分 ...
- asp.net调用oracle存储过程
oracle内的存储过程是通过游标返回结果集的 DataTable dt = new DataTable(); OracleParameter[] paras = ]; paras[] = new O ...