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. create-react-app 使用 webpack 打包压缩失败

    问题,正常 npm run build 打包后,发现打包后的文件异常大,有 > 20M 的大小 分析, 1.起初以为是代码本身过大的原因导致的,所以一直在想如何进行代码拆分使得文件能尽可能的小, ...

  2. Linq To Entities中的动态排序

    换了工作有一个月了,一样的工作.一样的代码.一样的体力活仍就…… Linq To Entityes 也是不新玩意了,近半年来也一直与之打交道,但一直也没对其深究过.今天新加的功能要对所有列支持排序,这 ...

  3. IOS开发之----常用的基本GDB命令【转】

    原文地址:http://blog.sina.com.cn/s/blog_71715bf801016d2y.html gdb不是万能的,可是没有gdb却是万万不能的.这里给大家简单介绍下iOS开发中最基 ...

  4. iOS开发——高级篇——iOS开发之网络安全密码学

    一.非对称加密 - RSA : + 公钥加密,私钥解密: + 私钥加密,公钥解密: + 只能通过因式分解来破解 二.对称加密 - DES - 3DES - AES (高级密码标准,美国国家安全局使用, ...

  5. jQuery的小例子

    1.在html中插入子页面 <script type="text/javascript"> $(document).ready(function() { $(" ...

  6. JavaScript语言基础4

    谈谈JavaScript 中的变量. 在JavaScript 中使用变量的优点:变量保存在计算机的内存中,变量很适合于保存暂时性的数据 ,变量仅仅具有有限的生存期,当 用户关闭了页面或者打开一个新的页 ...

  7. Gradle 安装

    Gradle介绍 Gradle是一个基于JVM的构建工具,它提供了: 像Ant一样,通用灵活的构建工具 可以切换的,基于约定的构建框架 强大的多工程构建支持 基于Apache Ivy的强大的依赖管理 ...

  8. Lightoj 1020 - A Childhood Game

    Allice先拿,最后拿球的输. Bob先拿,最后拿球的赢. 考虑Alice先拿球,当n=1时 Alice输  记dp[1]=0; n=2,  dp[2]=1 n=3,  dp[3]=1 因为n=1, ...

  9. varint算法——本质上是牺牲最高位作为标识数据结束位，达到变长编码，说白了就是贪心的分割位

    varint算法,摘自:http://blog.csdn.net/liaoquesg/article/details/50897327 最近在看<大规模WEB服务开发技术>这本书中.书中提 ...

  10. Python进程间通信Queue

    1.Queue使用方法: Queue.qsize():返回当前队列包含的消息数量: Queue.empty():如果队列为空,返回True,反之False : Queue.full():如果队列满了, ...