《微信小程序开发从入门到实战》学习二十九

3.4 开发参与投票页面

3.4.4 使用label组件扩大单击区域

radio组件的单击区域很小,只有文字左侧的圆圈可以点击,实际使用者一般会期望点击文字也可以选中选项,用label组件包含radio组件,就可以实现点击文字也可以选项。

label组件内部可以包含switch、button、radio和checkbox这几种组件,cheeckbox是多选组件。

使用label组件扩大单击区域代码如下:

    <view class="option" wx:for="{{optionList}}" wx:key="index">

      <label>

        <checkbox value="{{index}}" disabled="{{isExpired}}">{{item}}</checkbox>

      </label>

    </view>

3.4.5 wx:if添加渲染

如何跟据不同的情况在页面使用不同的组件?通过wx:if条件渲染实现该 单选投票时使用radio组件,该多选投票时使用checkbox组件。

它的使用示例如下:

<view wx:if="condition">This will be displayed if condition is true</view>

<view wx:if="{{num > 0}}">The num is greater than 0</view>

<view wx:elif="{{num < 0}}">The num is less than 0</view>

<view wx:else>The num is 0</view>

之前看到if就意识到它怎么用。但书中角度还挺不一样的。

从名称角度来看wx:if和wx:for属性相似,但实现的是不同的功能。wx:if属性值是boolean类型,为true才会被渲染,wx:for属性值是array类型,每项内容都会被渲染。

从功能性和hidden属性相似,但使用场景,实现原理不同。hidden组件往往控制一个组件显示隐藏它控制组件永远会被渲染只是简单的显示和隐藏。wx:if是和wx:elif、wx:else结合使用,实现多个分支的条件渲染。可以控制组件是否被渲染。

3.4.6 使用checkbox多项选择器组件

checkbox组件和check-group组件结合使用,checkbox和radio组件很像,checkbox常用属性如下:

checkbox常用属性:

value                单个checkbox组件的值

checked            当前是否选中

disabled            是否禁用

color                 checkbox颜色

checkbox-group常用属性:

bindchange                内部checkbox选项改变时触发的事件处理函数,可以通过event.detail.value获取到选中的checkbox组件的值

修改WXML投票部分代码,添加多选组件,修改单选组件,相关代码如下:

  <checkbox-group wx:if="{{type === 'multiVote'}}" class="option-list" bindchange="onPickOption">

    <view class="option" wx:for="{{optionList}}" wx:key="index">

      <label>

        <checkbox value="{{index}}" disabled="{{isExpired}}">{{item}}</checkbox>

      </label>

    </view>

  </checkbox-group>

  <radio-group wx:else class="option-list" bindchange="onPickOption">

    <view class="option" wx:for="{{optionList}}" wx:key="index">

      <label>

        <radio value="{{index}}" disabled="{{isExpired}}">{{item}}</radio>

      </label>

    </view>

  </radio-group>

另外修改JS中的事件处理函数onPickOption,增加多选投票代码,修改单选投票,代码如下:

  onPickOption(e){

    if(this.data.type === 'multiVote'){

      //更新选择的选项(多选投票)

      this.setData({

        pickedOption: e.detail.value //checkbox-group 获取的值是一个array

      })

    }else {

      //更新选择的选项(多选投票)

      this.setData({

        pickedOption: [ //为了与多选投票统一,使用数组保存选择的选项

          e.detail.value //radio-gruop获取的值是一个string

        ]

      })

    }

修改AppData中的type值为multiVote,在模拟器中看到多选组件,预览效果如下:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/187932.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

接口自动化测试是个啥?如何开始?什么是框架?带你揭开神秘面纱

自动化测试 自动化测试&#xff0c;这几年行业内的热词&#xff0c;也是测试人员进阶的必备技能&#xff0c;更是软件测试未来发展的趋势。 特别是在敏捷模式下&#xff0c;产品迭代速度快&#xff0c;市场不断调整&#xff0c;客户需求不断变化&#xff0c;单纯的手工测试越…

新版PY系列离线烧录器,支持PY002A/002B/003/030/071等MCU各封装,不同 FLASH 大小型号

PY系列离线烧录器&#xff0c;目前支持PY32F002A/002B/002/003/030/071/072/040/403/303 各封装、不同 FLASH 大小型号。PY离线烧录器需要搭配上位机软件使用&#xff0c;上位机软件可以在芯岭技术官网上下载&#xff0c;还包括了离线烧录器的使用说明。PY离线烧录器使用MINI U…

DNS/ICMP协议、NAT技术

目录 DNS协议DNS背景域名简介 ICMP协议ICMP功能ping命令traceroute命令 NAT技术NAT技术背景NAT IP转换过程NAPTNAT技术的缺陷NAT和代理服务器 网络协议总结应用层传输层网络层数据链路层 DNS协议 DNS&#xff08;Domain Name System&#xff0c;域名系统&#xff09;协议&…

【微服务专题】SpringBoot自动配置简单源码解析

目录 前言阅读对象阅读导航前置知识什么是自动配置0.1 基本概念0.2 SpringBoot中的【约定大于配置】0.3 从SpringMVC看【约定大于配置】0.4 从Redis看【约定大于配置】0.5 小结 笔记正文一、EnableAutoConfiguration源码解析二、SpringBoot常用条件注解源码解析2.1 自定义条件注…

thinkphp6遭遇500错误却没有任何报错解决办法

此问题多数出现在windows开发环境下。 先说原因&#xff0c;电脑设置-环境变量-path 混入了中文路径。需要删除掉。 或者看第二种解决办法&#xff1a; 找到vendor/topthink/framework/src/think/exception/Handle.php 在最后加上下面这个方法 /*** 将获取的服务器信息中的…

图片转换成pdf格式的软件ABBYY16

ABBYY PDF这款提供多种图像处理选项&#xff0c;可提高源图像的质量&#xff0c;便于准确地识别光学字符。我们扫描纸质文档或从图像文件创建 PDF 时&#xff0c;务必选择合适的图像处理选项。而在ABBYY PDF 中包含下列图像处理选项。 识别文本 — 选择此选项会将文本层放在图…

ubuntu22.04 arrch64版在线安装node

脚本 #安装node#下载node、npm国内镜像&#xff08;推荐&#xff09;# 判断是否安装了nodeif type -p node; thenecho "node has been installed."elsemkdir -p /home/zenglg cd /home/zenglgwget https://registry.npmmirror.com/-/binary/node/v10.14.1/node-v10.…

python操作redis

操作单redis 需要安装redis模块&#xff1a;pip install redis demo&#xff1a; #!/usr/bin/env python3 # coding utf-8import redis import threadingdef a():conn redis.Redis(host"192.168.1.66", port6379, password"123456", db6,# decode_res…

VS中如何使用Halcon

使用Halcon的本质就是调用Halcon的库&#xff0c;其主要步骤有&#xff1a; 1、将Halcon代码导出为C的.cpp文件 2、获取.cpp文件中的action函数的函数体 3、添加Halcon的动态库和静态库 4、添加action函数需要的头文件 导出halcon中的代码 a&#xff09;导出代码 b&#x…

基础C语言编程题

int i,j; int a[3][3]; for(i0;i<3;i){for(j0;j<3;j){scanf("%d",&a[i][j]);a[i][j]a[i][j]*2;}} 6.功能&#xff1a;把20个随机数存入一个数组&#xff0c;然后输出该数组中的最大值。 int main(){int p[20];int i,max0;for(i0;i<20;i){scanf("…

【数据结构】树与二叉树(廿四):树搜索给定结点的父亲(算法FindFather)

文章目录 5.3.1 树的存储结构5. 左儿子右兄弟链接结构 5.3.2 获取结点的算法1. 获取大儿子、大兄弟结点2. 搜索给定结点的父亲a. 算法FindFatherb. 算法解析c. 代码实现 3. 代码整合 5.3.1 树的存储结构 5. 左儿子右兄弟链接结构 【数据结构】树与二叉树&#xff08;十九&…

评测|PolarDB MySQL 版 Serverless

评测&#xff5c;PolarDB MySQL 版 Serverless 目录 一、测试背景 1.1、云原生数据库 PolarDB Serverless新架构概念 1.2、Serverless资源弹性扩缩触发条件 二、PolarDB的Serverless能力与同类型产品进行对比 三、动态弹性升降资源的能力测试 3.1、测试资源 3.2、测试一…

pwn:[SWPUCTF 2021 新生赛]nc签到

题目 linux环境下显示为 配合题目的下载附件&#xff0c;发现过滤了一些&#xff0c;一旦输入这些会自动关闭程序 ls被过滤了&#xff0c;可以使用l\s cat和空格都被过滤了&#xff0c;cat可以换成c\at ,空格可以换成$IFS$9

【nacos】配置使用

nacos配置 遇见的问题 代码启动成功&#xff0c;但是配置文件未生效 观察报错 无报错&#xff0c;也看到了加载的配置文件路径&#xff0c;但是配置未生效 [main] [TID: N/A] c.a.c.n.refresh.NacosContextRefresher : [Nacos Config] Listening config: dataIda-servi…

Multi-modal brain tumor image segmentation based on improved U-net model

THE ARCHITECTURE OF IMPROVED NETWORK MODEL 作者未提供代码

LeetCode 1457. 二叉树中的伪回文路径:深度优先搜索(DFS) + 位运算优化

【LetMeFly】1457.二叉树中的伪回文路径&#xff1a;深度优先搜索(DFS) 位运算优化 力扣题目链接&#xff1a;https://leetcode.cn/problems/pseudo-palindromic-paths-in-a-binary-tree/ 给你一棵二叉树&#xff0c;每个节点的值为 1 到 9 。我们称二叉树中的一条路径是 「…

讲述 什么是鸿蒙 为什么需要鸿蒙 为什么要学习鸿蒙

首先 我们为什么要学习鸿蒙开发&#xff1f; 因为 鸿蒙发展前景巨大 鸿蒙自发布依赖 一直受社会各界关注 强两百的 App厂商 大部分接受了与鸿蒙的合作 硬件也有非常多与鸿蒙合作的厂商 鸿蒙的合作企业基本已经覆盖整个互联网客户的主流需求 所以鸿蒙的崛起不过是早晚的问题 …

英文文献阅读工具和经验分享

在搞学术的时候需要阅读大量的英文论文或者是英文原著&#xff0c;我也一直在摸索如何方便高效的阅读。本篇仅为个人经验之谈&#xff0c;大家还是要找到合适自己的方式。 方法一&#xff1a;deepLGoodNotes 优点&#xff1a; 可以各种划线标注、手写笔记&#xff0c;加入图片…

什么是AWS CodeWhisperer?

AWS CodeWhisperer https://aws.amazon.com/cn/codewhisperer/ CodeWhisperer 经过数十亿行代码的训练&#xff0c;可以根据您的评论和现有代码实时生成从代码片段到全函数的代码建议。 ✔ 为您量身定制的实时 AI 代码生成器 ✔ 支持热门编程语言和 IDE ✔ 针对 AWS 服务的优…

Python 安装Vue依赖包发生异常:npm ERR! notsup Required: {“node“:“^18.17.0 || >=20.5.0“}

异常&#xff1a; 原因&#xff1a;node和npm要求升级为高版本 解决&#xff1a;重新安装node环境 &#xff08;1&#xff09; 官网下载Node.js &#xff08;2&#xff09;双击安装node.js &#xff08;3&#xff09;运行查看
最新文章