switch 开关选择器组件说明:

switch,开关选择器。只能选择或者不选。这种属于表单控件或者查询条件控件。

switch 开关选择器示例代码运行效果如下:

下面是WXML代码:

[XML] 纯文本查看 复制代码
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代码:

[JavaScript] 纯文本查看 复制代码
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代码:

[CSS] 纯文本查看 复制代码
1
2
3
4
5
6
7
.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    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 开关选择器的更多相关文章

  1. 微信小程序组件解读和分析:五、text文本

    text文本组件说明: text 文本就是微信小程序中显示出来的文本. text文本组件的示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 1 2 3 4 <v ...

  2. 微信小程序组件解读和分析:六、progress进度条

    progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行.progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pro ...

  3. 微信小程序组件解读和分析:四、icon图标

      icon图标组件说明: icon是一种图标格式,用于系统图标.软件图标等,这种图标扩展名为.icon..ico.常见的软件或windows桌面上的那些图标一般都是ICON格式的.在应用上面很多地方 ...

  4. 微信小程序组件解读和分析:九、form表单

    form表单组件说明: 表单,将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/ ...

  5. 微信小程序组件解读和分析:十四、slider滑动选择器

    slider滑动选择器组件说明: 滑动选择器. slider滑动选择器示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 ...

  6. 微信小程序组件解读和分析:十、input输入框

    input输入框组件说明: 本文介绍input 输入框的各种参数及特性. input输入框示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 01 02 03 04 0 ...

  7. 微信小程序组件解读和分析:十二、picker滚动选择器

    picker滚动选择器组件说明: picker: 滚动选择器,现支持三种选择器,通过mode属性来区分, 分别是普通选择器(mode = selector),时间选择器(mode = time),日期 ...

  8. 微信小程序组件解读和分析:八、checkbox复选项

    checkbox复选项组件说明: checkbox是小程序表单组件中的一个组件,作用是在表单中引导用户做出选择. 要使用checkbox组件,还需要在同组中所有的checkbox标签外使用checkb ...

  9. 微信小程序组件解读和分析:一、view(视图容器 )

    view组件说明:    视图容器    跟HTML代码中的DIV一样,可以包裹其他的组件,也可以被包裹在其他的组件内部.用起来比较自由随意,没有固定的结构. view组件的用法: 示例项目的wxml ...

随机推荐

  1. Matplotlib绘图基础

    import matplotlib.pyplot as plt import numpy as np #绘图流程 x=np.linspace(-1,1,100) y=x**2 plt.plot(x,y ...

  2. createElement与innerHtml性能比較

    js中.动态加入html的方法大致就是两种,一种是document.createElement等方法创建,然后使用Element.appendChild加入,或者是使用Element.innerHTM ...

  3. jquery源码学习笔记一:总体结构

    练武不练功,到老一场空.计算机也一样. 计算机的功,就是原理.如果程序员只会使用各种函数,各种框架,而不知其原理,顶多熟练工人而已.知其然,更要知其所以然. jquery我们用得很爽,但它究竟咋实现的 ...

  4. Flame Graphs

    http://www.brendangregg.com/flamegraphs.html Flame graphs are a visualization of profiled software, ...

  5. 比特币交易(Transaction)的输入与输出

    比特币通过“挖矿”机制保证了不能任意造币.通过分布式网络和HashCash机制解决双重支付问题.事实上比特币系统中不存在独立的电子货币,而只存在交易单(账单),货币值是依附于交易单存在的,所以比特币中 ...

  6. 【POJ 1947】 Rebuilding Roads

    [题目链接] 点击打开链接 [算法] f[i][j]表示以i为根的子树中,最少删多少条边可以组成j个节点的子树 树上背包,即可 [代码] #include <algorithm> #inc ...

  7. Git 仓库结构 (一)***

    Git 仓库      1.1Git 基本概念    在Git中,我们将需要进行版本控制的文件目录叫做一个仓库(repository),每个仓库可以简单理解成一个目录,这个目录里面的所有文件都通过Gi ...

  8. 《JAVA与模式》之解释器模式

    解释器模式是类的行为模式.给定一个语言之后,解释器模式可以定义出其文法的一种表示,并同时提供一个解释器.客户端可以使用这个解释器来解释这个语言中的句子. 解释器模式的结构 下面就以一个示意性的系统为例 ...

  9. char-rnn-tensorflow源码解析及结构流程分析

    char-rnn-tensorflow由飞飞弟子karpathy编写,展示了如何用tensorflow来搭建一个基本的RNN(LSTM)网络,并进行基于char的seq2seq进行训练. 数据读取部分 ...

  10. asp.net调用oracle存储过程

    oracle内的存储过程是通过游标返回结果集的 DataTable dt = new DataTable(); OracleParameter[] paras = ]; paras[] = new O ...