微信小程序单选框组应用详解
作者:不大好不大好
这篇文章主要为大家详细介绍了微信小程序单选框组应用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序单选框组应用的具体代码,供大家参考,具体内容如下
需求概述
有一个核选项数组,里面存放着核选项名称、内容、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); } })
当存在核选项未进行选择时,点击保存,弹窗提醒效果图
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。