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

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

相关推荐
欧先生^_^27 分钟前
学习 Apache Kafka
学习·kafka·apache
妙极矣1 小时前
JAVAEE初阶01
java·学习·java-ee
娃娃略1 小时前
【AI模型学习】双流网络——更强大的网络设计
网络·人工智能·pytorch·python·神经网络·学习
圆弧YH1 小时前
Ardunio学习
学习
我的golang之路果然有问题1 小时前
案例速成GO+redis 个人笔记
经验分享·redis·笔记·后端·学习·golang·go
韩明君2 小时前
前端学习笔记(四)自定义组件控制自己的css
前端·笔记·学习
noevil3 小时前
cuda学习1: 获取设备信息
学习
FAREWELL000753 小时前
C#进阶学习(十四)反射的概念以及关键类Type
开发语言·学习·c#·反射·type
隐-梵3 小时前
Android studio学习之路(八)---Fragment碎片化页面的使用
android·学习·android studio
百锦再3 小时前
Kotlin学习基础知识大全(上)
android·xml·学习·微信·kotlin·studio·mobile