《微信小程序开发从入门到实战》学习二十八
3.4 开发参与投票页面
3.4.3 使用radio单项选择器组件
逻辑层的数据已经准备好,现在实现视图层的页面展示。
投票的标题、,描述、截止日期、是否匿名等信息通过view和text组件就可以展示。比较特别的是投票选项的展示,涉及到单选还是多选,现在使用radio实现单选的功能,radio组件结合radio-group组件一起使用,一个radio组件代表一个选项。现在了解radio和radio-group常用属性。
radio常用属性:
value 单个radio组件的值
checked 当前是否选中
disabled 是否禁用
color radio颜色
radio-group常用属性:
bindchange 内部radio选项改变时触发的事件处理函数,可以通过event.detail.value获取到选中的radio组件的值
现在在pages/vote/vote.wxml用radio组件实现单选投票的功能,代码如下:
<view class="container">
<view class="title">{{voteTitle}}</view>
<view class="desc">
{{voteDesc}}
<text class="multi-radio">[{{type === 'multiVote'?'多选':'单选'}}]</text>
<text class="anonymouType">[{{isAnonymous?'匿名':'实名'}}]</text>
</view>
<radio-group class="option-list" bindchange="onPickOption">
<view class="option" wx:for="{{optionList}}" wx:key="index">
<radio value="{{index}}" disabled="{{isExpired}}">{{item}}</radio>
</view>
</radio-group>
<view class="end-date">
截止日期:{{endDate}}
<text class="expired" hidden="{{!isExpired}}">[已过期]</text>
</view>
<button class="btn" type="primary" disabled="{{isExpired || pickedOption.length === 0}}" bind:tap="onTapValue"> 完成</button>
</view>
这里text使用了hidden属性,是所有组件都支持的一个属性,值为boolean类型,为true时组件会被隐藏。
radio组件的value使用了数组的角标,数组是有序集合,具有唯一性,且在传输投票数据和存储数据占用的数据量小很多。
在JS文件中增加radio组件改变时的事件处理函数和确认投票时的button组件点击时的事件处理函数,代码如下:
onPickOption(e){
// 更新选择的项
this.setData({
pickedOption: [
e.detail.value
]
})
},
onTapValue(){
console.log("onTapValue")
const postData = {//需要提交的数据
voteID: this.data.voteID,
pickedOption: this.data.pickedOption
}
// TODO 将postData数据上传到服务器端
}
表单数据的提交不一定是form组件和form-type属性指定的事件处理函数,在button的点击事件处理函数也可以向服务器端提交数据。
接下来在WXSS添加样式:
/* pages/vote/vote.wxss */
.container {
padding:30rpx;
box-sizing: border-box;
}
.title {
columns:#333;
font-weight: bold;
font-size: 20pt;
}
.desc{
font-size: 14pt;
margin-top: 40rpx;
}
.multi-radio{
margin-left: 10rpx;
color: #09BB07;
}
.anonymouType{
margin-left: 10rpx;
color:#ccc;
}
.option-list{
margin-top: 40rpx;
}
.option{
margin-top: 10rpx;
}
.end-date{
margin-top: 40rpx;
font-size: 12pt;
color:#ccc;
}
.expired{
margin-left: 10rpx;
color: #CE3C39;
}
.btn{
margin-top: 40rpx;
}
当投票未过期时,预览效果如下:

当投票过期时,预览效果如下:

调试器AppData修改isExpired值可以实现过期的预览效果
相关文章:
《微信小程序开发从入门到实战》学习二十八
3.4 开发参与投票页面 3.4.3 使用radio单项选择器组件 逻辑层的数据已经准备好,现在实现视图层的页面展示。 投票的标题、,描述、截止日期、是否匿名等信息通过view和text组件就可以展示。比较特别的是投票选项的展示,涉及到单选还是多选&…...
2824. 统计和小于目标的下标对数目 : 详解 “左找右“ “右找左“ 两种方式
题目描述 这是 LeetCode 上的 「2824. 统计和小于目标的下标对数目」 ,难度为 「简单」。 Tag : 「排序」、「二分」、「双指针」 给你一个下标从 0 开始长度为 n 的整数数组 nums 和一个整数 target,请你返回满足 0 < i < j < n 且 nums[i] n…...
windows电脑定时开关机设置
设置流程 右击【此电脑】>【管理】 【任务计划程序】>【创建基本任务】 gina 命令 查看 已经添加的定时任务从哪看?这里: 往下滑啦,看你刚才添加的任务:...
微信小程序取消自定义默认标题
微信小程序取消自定义默认标题 在单独页面index.json中添加 "navigationStyle":"custom"即可 注:仅记录开发查找!!!...
Vue3鼠标拖拽生成区域块并选中元素
Vue3鼠标拖拽生成区域块并选中元素,选中的元素则背景高亮(或者其它逻辑)。 <script setup> import { ref } from vue// 区域ref const regionRef ref(null)// 内容ref const itemRefs ref(null)// 是否开启绘画区域 const enable ref(false)// 鼠标开始位置…...
[深度理解] 重启 Splunk Search Head Cluster
1: 背景: 关于释放Splunk search head 的job 运行压力:splunk search head cluster 要重启的话,怎么办? 答案是:splunk rolling-restart shcluster-members Initiate a rolling restart from the command line Invoke the splunk rolling-restart command from any me…...
Python + Docker 还是 Rust + WebAssembly?
在不断发展的技术世界中,由大语言模型驱动的应用程序,通常被称为“LLM 应用”,已成为各种行业技术创新背后的驱动力。随着这些应用程序的普及,用户需求的大量涌入对底层基础设施的性能、安全性和可靠性提出了新的挑战。 Python 和…...
[汇编实操]DOSBox工具: unable to open input file: 文件名.asm问题解决
出错原因1 :将文件放在debug文件下,mount后发现并没有该文件 解决方案 :重启DOSBox,重新mount,直到dir后可以看到该asm文件 出错原因2:DOS系统不支持8位以上的文件名 解决方案 :将文件名改为8…...
Windows安装MongoDB
1、下载MongoDB的zip,解压 2、创建目录 mkdir D:\JavaSoftware\Database\MongoDB\mongodb-win32-x86_64-windows-5.0.8\data\db mkdir D:\JavaSoftware\Database\MongoDB\mongodb-win32-x86_64-windows-5.0.8\data\log 3、创建一个配置文件mongod.cfg,…...
HandBrake 1.7 近日发布
导读HandBrake 1.7 近日发布,作为这个开源、免费和跨平台视频转码器应用程序的重大更新,适用于 GNU/Linux、macOS 和 Windows 系统。 在 HandBrake 1.6 发布近一年后,HandBrake 1.7 版本为 Linux 用户提供了许多好处,包括视频摘要…...
Vue3的watch使用介绍及场景
目录 一、watch的使用 1. 监听一个变量 2. 监听一个对象的属性 3. 监听一个函数的返回值 二、watch的使用场景 1. 监听表单的变化 2. 监听路由参数的变化 3. 监听Vuex中的数据变化 三、watch的效果图 四、watch的示例 以上就是Vue3的watch的介绍,watch是…...
Java设计原则和设计模式
目录 第一部分:设计原则 单一职责原则 (Single Responsibility Principle)开闭原则 (Open-Closed Principle)里氏替换原则 (Liskov Substitution Principle)接口隔离原则 (Interface Segregation Principle)依赖倒置原则 (Dependency Inversion Principle)合成/聚…...
webshell之基于框架免杀
thinkphp array_map_recursive函数 array_map_recursive函数分析 这里存在一个call_user_func命令执行函数 免杀效果 B函数 免杀效果 B函数分析 exec函数分析 在exec函数用存在有个类调用,且所有的参数都可控 smarty_php_tag函数 免杀效果 smarty_php_tag函数分析…...
QT QJsonObject 插入 QByteArray十六进制数据
场景描述 有一组十六进制数使用QByteArray进行存储;需要将其插入QJsonObject,然后通过网络发送出去;接收到后,再转换回QByteArray; 操作代码 1. QByteArray转换QString插入QJsonObject QString str ""; …...
概要设计文档案例分享
1引言 1.1编写目的 1.2项目背景 1.3参考资料 2系统总体设计 2.1整体架构 2.2整体功能架构 2.3整体技术架构 2.4运行环境设计 2.5设计目标 3系统功能模块设计 3.1个人办公 4性能设计 4.1响应时间 4.2并发用户数 5接口设计 5.1接口设计原则 5.2接口实现方式 6运行设计 6.1运行模块…...
微服务qiankun通信方式
qiankun: 是一种类似于微服务的架构,是将一个大型应用拆分成若干个更小、更简单,可以独立开发、测试和部署的子应用,然后由一个基座应用根据路由进行应用切换,主要是为了解决大型工程在变更、维护、扩展等方面的困难而…...
【Azure 架构师学习笔记】-Azure Storage Account(7)- 权限控制
本文属于【Azure 架构师学习笔记】系列。 本文属于【Azure Storage Account】系列。 接上文 【Azure 架构师学习笔记】-Azure Storage Account(6)- File Layer 前言 存储帐户作为其中一个数据终端存储,对安全性的要求非常高,不管…...
听GPT 讲Rust源代码--src/tools(2)
题图来自AI生成 File: rust/src/tools/rust-installer/src/util.rs 在Rust源代码中,rust/src/tools/rust-installer/src/util.rs文件是安装程序的一个辅助文件,它提供了一些实用函数和结构体来处理安装过程中需要的一些操作。 这个文件中定义了几个结构体…...
【python学习】基础篇-常用模块-collections模块:数据结构,如列表、元组、字典和集合等
Python中的collections模块提供了一些有用的数据结构,如列表、元组、字典和集合等。 以下是collections模块中一些常用数据结构的用法: Counter类 Counter类是一个字典子类,用于计数可哈希对象。 它可以接受一个可迭代对象作为参数ÿ…...
【电路笔记】-电源电压
电源电压 文章目录 电源电压1、概述1.1 交流发电机1.2 电池1.3 理想电压源1.4 实际电压源1.5 连接规则 2、相关源2.1 压控电压源 (VCVS)2.2 电流控制电压源 (CCVS) 3、总结 在本文中,我们详细介绍了称为电源电压的重要电子元件的架构、功能和使用。 我们首先提出理想…...
3分钟掌握抖音无水印下载:零门槛实现高清视频本地化
3分钟掌握抖音无水印下载:零门槛实现高清视频本地化 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback support…...
C语言新手必看:从电子科大程算I机考真题里,我总结出的5个函数题避坑指南
C语言新手必看:从电子科大程算I机考真题里,我总结出的5个函数题避坑指南 第一次参加电子科大程算I机考的同学,往往会在函数题上栽跟头。作为过来人,我复盘了近年真题,发现80%的失分都集中在几个典型陷阱上。今天不谈标…...
终极HEIF图片转换指南:如何在Windows上轻松处理苹果HEIF格式照片
终极HEIF图片转换指南:如何在Windows上轻松处理苹果HEIF格式照片 【免费下载链接】HEIF-Utility HEIF Utility - View/Convert Apple HEIF images on Windows. 项目地址: https://gitcode.com/gh_mirrors/he/HEIF-Utility 你是否曾经尝试在Windows电脑上打开…...
如何快速配置多语言OCR:OCRmyPDF完整指南
如何快速配置多语言OCR:OCRmyPDF完整指南 【免费下载链接】OCRmyPDF OCRmyPDF adds an OCR text layer to scanned PDF files, allowing them to be searched 项目地址: https://gitcode.com/GitHub_Trending/oc/OCRmyPDF 你是否曾遇到过扫描的PDF文件无法搜…...
保姆级教程:在YOLOv8中集成DWR、MSCA、LSK三大注意力模块(附完整代码与配置文件)
YOLOv8注意力模块集成实战:DWR、MSCA、LSK三大模块深度解析 计算机视觉领域正在经历一场由注意力机制引领的革命。当我在处理遥感图像检测项目时,发现传统YOLOv8模型对小目标和复杂背景的识别效果总是不尽如人意。直到尝试集成最新的注意力模块ÿ…...
G-Helper华硕笔记本控制工具完整指南:从新手到专家的实用技巧
G-Helper华硕笔记本控制工具完整指南:从新手到专家的实用技巧 【免费下载链接】g-helper Lightweight, open-source control tool for ASUS laptops and ROG Ally. Manage performance modes, fans, GPU, battery, and RGB lighting across Zephyrus, Flow, TUF, St…...
移动端UI自动化测试框架Maestro:YAML驱动,跨平台高效测试实践
1. 项目概述:一个面向移动端UI测试的自动化框架如果你是一名移动端开发者或测试工程师,那么对UI自动化测试的繁琐和脆弱性一定深有体会。传统的基于坐标或图像识别的方案,在设备分辨率、系统版本、甚至UI组件微小的样式变动面前,常…...
Weka机器学习工具入门与实战指南
1. Weka机器学习工具入门指南Weka作为一款开源的机器学习工具集,自1997年由怀卡托大学开发以来,已成为学术界和工业界广泛使用的数据挖掘平台。它集成了数据预处理、分类、回归、聚类、关联规则挖掘和可视化等完整功能链,特别适合没有编程基础…...
AI智能体框架yu-ai-agent:快速构建与部署开发者指南
1. 项目概述:一个面向开发者的AI智能体框架最近在GitHub上闲逛,发现了一个挺有意思的项目,叫yu-ai-agent。这个项目来自开发者liyupi,也就是大家熟知的“程序员鱼皮”。看到这个名字,我的第一反应是:这应该…...
SQL查询优化:NOT EXISTS与LEFT JOIN性能对比
NOT EXISTS和LEFT JOIN...IS NULL在逻辑上等价但性能差异显著。NOT EXISTS采用半连接(Semi Join)机制,找到第一个匹配即停止扫描,内存占用低;LEFT JOIN则需完成全连接后再过滤,内存消耗高。在users表100万行、orders表1亿行的场景…...
