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

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

相关推荐
小张是铁粉14 分钟前
oracle的内存架构学习
数据库·学习·oracle·架构
HERR_QQ25 分钟前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
码荼10 小时前
学习开发之hashmap
java·python·学习·哈希算法·个人开发·小白学开发·不花钱不花时间crud
武昌库里写JAVA11 小时前
Oracle如何使用序列 Oracle序列使用教程
java·开发语言·spring boot·学习·课程设计
祁思妙想11 小时前
八股学习(三)---MySQL
数据库·学习·mysql
amazinging12 小时前
北京-4年功能测试2年空窗-报培训班学测开-第四十一天
python·学习·appium
Jyywww12112 小时前
微信小程序学习笔记
笔记·学习·微信小程序
amazinging12 小时前
北京-4年功能测试2年空窗-报培训班学测开-第三十九天
python·学习·appium
每次的天空13 小时前
Android-自定义View的实战学习总结
android·学习·kotlin·音视频
重庆小透明13 小时前
力扣刷题记录【1】146.LRU缓存
java·后端·学习·算法·leetcode·缓存