微信小程序单选框组应用详解
本文实例为大家分享了微信小程序单选框组应用的具体代码，供大家参考，具体内容如下
需求概述有一个核选项数组，里面存放着核选项名称、内容、ID、选择状态。选择状态有未选择、符合、不符合三种，默认全部为未选择。通过wx:for将数组渲染到页面，每个核选项都有两个单选按钮，分别是符合和不符合按钮，点击对应按钮会将改变对应那条元素中的选择状态的值，且点击不符合时，会显示出一个文本域，让用户输入不符合原因。
页面最下面有一个提交按钮，点击时会遍历核选项数组，若有选择状态为未选择的项，则无法提交，并提醒。
效果图如下
直接上代码
wxml文件
<block wx:for="{{SmallItem}}" wx:key="itemID">
<view class="SmallItemView">
<view class="infoView">
<!-- 核选项的基本信息，例如名称、内容 -->
<view class="SmallItemName">
<label for="">核选项名称:</label>
<text>{{item.itemName}}</text>
</view>
<view class="SmallItemContent" >
<label for="">核选项内容:</label>
{{item.itemContent}}
</view>
</view>
<view class="reasonView" hidden="{{item.AccordWith=='不符合'?false:true}}">
<!-- 不符合的时候显示的文本域 -->
<textarea placeholder="请输入不符合原因"
maxlength="-1"
bindblur="inputChange"
data-index="{{index}}">
</textarea>
</view>
<view class="counterView">
第{{index+1}}项/共{{SmallItem.length}}项
</view>
<view class="radioView">
<!-- 核选项的单选框 -->
<radio-group bindchange="radioChange" data-index="{{index}}">
<radio value="符合">符合</radio> <!--前面有两个中文全角空格-->
<radio value="不符合">不符合</radio>
</radio-group>
</view>
</view>
</block>
<button type="default" class="SubmitBtn" bind:tap="HXXSubmit">提交</button>
wxss文件
.SmallItemView {
background-color: rgba(169, 169, 169, 0.329);
padding: 5px;
margin: 3px;
border-radius: 3px;
margin-bottom: 10px;
/* box-shadow: 0px 2px 4px 2px #120f0f5c; */
}
.infoView {
margin-bottom: 5px;
}
.SmallItemName {
/* 核选项名称view */
background-color: white;
margin-bottom: 2px;
border-radius: 3px;
padding: 2px;
}
.SmallItemName>label {
display: block;
font-weight: bold;
}
.SmallItemContent {
/* 核选项内容 */
background-color: white;
margin-bottom: 2px;
border-radius: 3px;
padding: 2px;
}
.SmallItemContent>label {
display: block;
font-weight: bold;
}
.reasonView {
/*不符合原因文本域样式*/
background-color: white;
padding: 2px;
border-radius: 3px;
margin-bottom: 3px;
}
.radioView {
text-align: center;
}
.counterView {
text-align: center;
font-size: x-small;
background-color: white;
margin-bottom: 5px;
}
.SubmitBtn {
/* 提交按钮样式 */
width: 90% !important;
margin: 5px 10px;
}
js文件
// pages/RadioDemo/RadioDemo.js
Page({
data: {
SmallItem: [
{ itemID: "1", itemName: "核选项1", itemType: "核选项", itemContent: "核选项内容1", AccordWith: "未选", textareaContent: "" },
{ itemID: "2", itemName: "核选项2", itemType: "核选项", itemContent: "核选项内容2", AccordWith: "未选", textareaContent: "" },
{ itemID: "3", itemName: "核选项3", itemType: "核选项", itemContent: "核选项内容3", AccordWith: "未选", textareaContent: "" },
{ itemID: "4", itemName: "核选项4", itemType: "核选项", itemContent: "核选项内容4", AccordWith: "未选", textareaContent: "" },
{ itemID: "5", itemName: "核选项5", itemType: "核选项", itemContent: "核选项内容5", AccordWith: "未选", textareaContent: "" },
{ itemID: "6", itemName: "核选项6", itemType: "核选项", itemContent: "核选项内容6", AccordWith: "未选", textareaContent: "" }
]
},
radioChange: function(e) {
// console.log("radio的值为：" + e.detail.value); //获取radio的值
// console.log("元素下标为：" + e.currentTarget.dataset.index); //获取元素在数组中的下标
let ValRadio = e.detail.value;
let EleIndex = e.currentTarget.dataset.index;
let key = 'SmallItem[' + EleIndex + '].AccordWith';
//更改数组SmallItem[EleIndex]中AccordWith的值
this.setData({
[key]: ValRadio
});
// console.log("SmallItem数组改变后", this.data.SmallItem);
},
HXXSubmit: function(e) {
//点击提交按钮，会获取data中的数组SmallItem，并且遍历其中的AccordWith属性的值
//若有AccordWith的值为“未选”，则弹出提示框，且事件执行结束
//否则将数组传回后台，进行保存
let arSmallItem = this.data.SmallItem; //获取data中的数组SmallItem
for (let i = 0; i < arSmallItem.length; i++) {
//遍历数组
if (arSmallItem[i].AccordWith == "未选") {
// console.log(arSmallItem[i].itemName + "未进行选择，请选择后提交");
wx.showToast({
title: '第' + (i + 1) + '项未进行核选\n请核选后提交',
icon: 'none',
duration: 2000
})
return;
}
}
console.log("所有核选项已选择");
//程序能执行到这里，说明所有核选项都已经进行了选择，可以进行数据保存操作
// var reqTask = wx.request({
// url: '',
// data: {},
// header: { 'content-type': 'application/json' },
// method: 'GET',
// dataType: 'json',
// responseType: 'text',
// success: (result) => {
// },
// fail: () => {},
// complete: () => {}
// });
},
inputChange: function(e) {
// console.log(e);
let index = e.currentTarget.dataset.index; //获取元素在数组中的下标
let content = e.detail.value; //获取在文本域中输入的值
let key = 'SmallItem[' + index + '].textareaContent';
this.setData({
[key]: content
});
console.log("SmallItem数组改变后", this.data.SmallItem);
}
})
当存在核选项未进行选择时，点击保存，弹窗提醒效果图
