国内网站开发的主流技术,wix怎么做网站,客户关系管理系统的功能,网页制作网站素材3.4 开发参与投票页面
3.4.3 使用radio单项选择器组件
逻辑层的数据已经准备好#xff0c;现在实现视图层的页面展示。
投票的标题、#xff0c;描述、截止日期、是否匿名等信息通过view和text组件就可以展示。比较特别的是投票选项的展示#xff0c;涉及到单选还是多选现在实现视图层的页面展示。
投票的标题、描述、截止日期、是否匿名等信息通过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 classcontainer view classtitle{{voteTitle}}/view view classdesc {{voteDesc}} text classmulti-radio[{{type multiVote?多选:单选}}]/text text classanonymouType[{{isAnonymous?匿名:实名}}]/text /view radio-group classoption-list bindchangeonPickOption view classoption wx:for{{optionList}} wx:keyindex radio value{{index}} disabled{{isExpired}}{{item}}/radio /view /radio-group view classend-date 截止日期{{endDate}} text classexpired hidden{{!isExpired}}[已过期]/text /view button classbtn typeprimary disabled{{isExpired || pickedOption.length 0}} bind:taponTapValue 完成/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值可以实现过期的预览效果
