专栏首页算法与编程之美微信小程序|复选框

微信小程序|复选框

问题描述

1 什么是复选框

复选框是一种可同时选中多项的基础控件,也是基于计算机语言的编程代码框架,它的作用是用鼠标点击进行操作,来完成选中多个目标。复选框,用方框表示。“复”表示两个或两个以上,“复选”表示可以选择两个或两个以上多个选项。复选框同单选框不同,单选框是圆的,只能选一个选项,不能选两个或两个以上多个选项。如下就是典型的复选框样式:

图1.1 效果图

2 相关属性

checkbox-group 多项选择器组,内部由多个checkbox组成,是制作复选框的重要组件。其常用属性如下:

图2.1 checkbox-group属性

复选框一般包含多个多选项目。在用代码进行编写的过程中,我们一般使用checkbox极其相关属性。如下则是checkbox属性:

图2.2 checkbox属性

3 制作复选框的过程

再了解上述相关属性之后,我们就可以进行复选框的编写。根据相关属性设置颜色,选中样式等。相关index.wxml代码如下:

<text decode="{{true}}">&ensp;&ensp;请选择所在国家:\n</text><checkbox-group bindchange="checkboxChange"> <label wx:for="{{items}}"> <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}} </label> <label wx:for="{{items1}}"> <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}} </label></checkbox-group>

在HTML中&ensp;表示空格,</br>表示换行,但是在微信小程序这样的书写方式是不成立的。这是因为我们直接在wxml布局文件中,直接调用相关特殊符号的转义字符会无效,小程序的text文本控件的decode属性没有打开导致的。decode属性默认为false,不会解析我们的特殊字符,我们通过设置decode属性为true,并且调用其转义字符即可实现该特殊字符的显示。

在checkbox中我们采用for循环遍历的方式,显示各个选项。index.js文件代码如下:(最终显示效果如上图1.1所示)

Page({ data: { items: [ { name: 'CHN', value: '中国', checked: 'true' }, { name: 'USA', value: '美国' }, { name: 'JPN', value: '日本' }, ], items1:[ { name: 'WH', value: '武汉', checked: 'true' }, { name: 'JJS', value: '旧金山' }, { name: 'DJ', value: '东京' }, ] }, checkboxChange: function (e) { console.log('checkbox发生change事件,携带value值为:', e.detail.value) }})

END

实习编辑 | 王楠岚

责 编 | 刘 连

where2go 团队

本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:刘连

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-03-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Java|打jar包,exe,脱离jdk配置运行

    平时大家可能会学习到一些有关Java程序或小游戏的制作,但平时都是在eclipse或者在idea的工具里书写,并且通过run的方式来进行运行与检测,那当我们写好...

    算法与编程之美
  • 微信小程序|页面动态更新数据

    每一个小程序都是由很多的数据构成的,这些信息数据构成页面内容再通过视图展现给大家。大家平时所使用的微信小程序都是实时更新的将最新的数据内容分享给大家。如果没有进...

    算法与编程之美
  • python|输出给定范围内的顺次数

    我们定义「顺次数」为:每一位上的数字都比前一位上的数字大 1 的整数。 请你返回由 [low, high] 范围内所有顺次数组成的有序 列表(从小到大排序)

    算法与编程之美
  • Python 数据库骚操作

    最近这几天准备介绍一下 Python 与三大数据库的使用,这是第一篇,首先来介绍 MongoDB 吧,这里介绍 MongoDB 的两款操作库,走起!!

    小小詹同学
  • Python 数据库骚操作 -- MongoDB

    最近这几天准备介绍一下 Python 与三大数据库的使用,这是第一篇,首先来介绍 MongoDB 吧,这里介绍 MongoDB 的两款操作库,走起!!

    1480
  • python dict

    >>> phonebook = {'Alice': '2341', 'Beth': '9102', 'Cecil': '3258'}

    py3study
  • 微服务架构 CI/CD 实战

    在项目根路径下执行,Maven 命令 mvn clean install -pl com.lab:book-common -am -Ptest,截取输出如下

    JAVA日知录
  • 用 GraphQL 快速搭建服务端 API

    与 RESTful 设计不同,GraphQL 一般仅暴露出一个接口供使用,而具体一个请求中需要什么数据,数据怎么样组织完全由 API 的使用者(客户端)来指定。...

    物流IT圈
  • 流媒体服务器如何通过opencv获取IP摄像头(IP-camera)实时视频流

    我们在想要获取视频流的时候,可以通过网络摄像头获取实时视频流,但是这种方法的缺陷就是摄像头和主机必须连在一起,那这种在室外部署的时候就会非常麻烦并且不安全,还有...

    EasyNVR
  • 关于python安装lxml插件的问题

      文章只是介绍自己安装时从安装不上到安装后报错,再到安装成功的心路历程,并不代表广大欧皇也会会出现同类型的问题,也不是总结和汇总各种出问题的原因.

    py3study

扫码关注云+社区

领取腾讯云代金券