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

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值可以实现过期的预览效果

相关推荐
Hello_Embed6 小时前
STM32HAL 快速入门(二十):UART 中断改进 —— 环形缓冲区解决数据丢失
笔记·stm32·单片机·学习·嵌入式软件
咸甜适中6 小时前
rust语言 (1.88) 学习笔记:客户端和服务器端同在一个项目中
笔记·学习·rust
Magnetic_h7 小时前
【iOS】设计模式复习
笔记·学习·ios·设计模式·objective-c·cocoa
研梦非凡8 小时前
ICCV 2025|从粗到细:用于高效3D高斯溅射的可学习离散小波变换
人工智能·深度学习·学习·3d
limengshi1383929 小时前
机器学习面试:请介绍几种常用的学习率衰减方式
人工智能·学习·机器学习
知识分享小能手9 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
周周记笔记10 小时前
学习笔记:第一个Python程序
笔记·学习
优雅鹅11 小时前
ARM、AArch64、amd64、x86_64、x86有什么区别?
arm开发·学习
..过云雨11 小时前
05.【Linux系统编程】进程(冯诺依曼体系结构、进程概念、进程状态(注意僵尸和孤儿)、进程优先级、进程切换和调度)
linux·笔记·学习
咸甜适中11 小时前
rust语言 (1.88) egui (0.32.2) 学习笔记(逐行注释)(二十八)使用图片控件显示图片
笔记·学习·rust·egui