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

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

相关推荐
浪淘沙jkp27 分钟前
大模型学习二:DeepSeek R1+蒸馏模型组本地部署与调用
学习·deepseek
m0_613607011 小时前
数据集(Dataset)和数据加载器(DataLoader)-pytroch学习3
学习
序属秋秋秋1 小时前
算法基础_基础算法【位运算 + 离散化 + 区间合并】
c语言·c++·学习·算法·蓝桥杯
虾球xz2 小时前
游戏引擎学习第198天
学习·游戏引擎
网络安全指导员3 小时前
如何在JMeter中配置断言,将非200状态码视为测试成功
网络·学习·jmeter·安全·web安全·架构
浪淘沙jkp3 小时前
大模型学习四:‌DeepSeek Janus-Pro 多模态理解和生成模型 本地部署指南(折腾版)
python·学习·deepseek
Kx…………3 小时前
Uni-app入门到精通:uni-app的基础组件
前端·css·学习·uni-app·html
~樱小路~4 小时前
网络:华为数通HCIA学习:IP路由基础
网络·学习·华为
吴梓穆4 小时前
UE5学习笔记 FPS游戏制作42 按钮添加回调函数
笔记·学习·ue5
吴梓穆4 小时前
UE5学习笔记 FPS游戏制作39 制作一个带有背景的预制面板 使用overlay和nameSlot
笔记·学习·ue5