微信小程序單選框組應(yīng)用詳解
更新時(shí)間：2022年07月19日 09:45:38 作者：不大好不大好
這篇文章主要為大家詳細(xì)介紹了微信小程序單選框組應(yīng)用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序單選框組應(yīng)用的具體代碼，供大家參考，具體內(nèi)容如下
需求概述
有一個(gè)核選項(xiàng)數(shù)組，里面存放著核選項(xiàng)名稱、內(nèi)容、ID、選擇狀態(tài)。選擇狀態(tài)有未選擇、符合、不符合三種，默認(rèn)全部為未選擇。通過wx:for將數(shù)組渲染到頁(yè)面，每個(gè)核選項(xiàng)都有兩個(gè)單選按鈕，分別是符合和不符合按鈕，點(diǎn)擊對(duì)應(yīng)按鈕會(huì)將改變對(duì)應(yīng)那條元素中的選擇狀態(tài)的值，且點(diǎn)擊不符合時(shí)，會(huì)顯示出一個(gè)文本域，讓用戶輸入不符合原因。
頁(yè)面最下面有一個(gè)提交按鈕，點(diǎn)擊時(shí)會(huì)遍歷核選項(xiàng)數(shù)組，若有選擇狀態(tài)為未選擇的項(xiàng)，則無法提交，并提醒。
效果圖如下
直接上代碼
wxml文件
<block wx:for="{{SmallItem}}" wx:key="itemID">
? ? <view class="SmallItemView">
? ? ? ? <view class="infoView">
? ? ? ? ? ? <!-- 核選項(xiàng)的基本信息，例如名稱、內(nèi)容 -->
? ? ? ? ? ? <view class="SmallItemName">
? ? ? ? ? ? ? ? <label for="">核選項(xiàng)名稱:</label>
? ? ? ? ? ? ? ? <text>{{item.itemName}}</text>
? ? ? ? ? ? </view>
? ? ? ? ? ? <view class="SmallItemContent" >
? ? ? ? ? ? ? ? <label for="">核選項(xiàng)內(nèi)容:</label>
? ? ? ? ? ? ? ? {{item.itemContent}}
? ? ? ? ? ? </view>
? ? ? ? </view>
? ? ? ? <view class="reasonView" hidden="{{item.AccordWith=='不符合'?false:true}}">
? ? ? ? ? ? <!-- 不符合的時(shí)候顯示的文本域 -->
? ? ? ? ? ? <textarea placeholder="請(qǐng)輸入不符合原因"?
? ? ? ? ? ? ? ? ? ? ? maxlength="-1"?
? ? ? ? ? ? ? ? ? ? ? bindblur="inputChange"
? ? ? ? ? ? ? ? ? ? ? data-index="{{index}}">
? ? ? ? ? ? </textarea>
? ? ? ? </view>
? ? ? ? <view class="counterView">
? ? ? ? ? ? 第{{index+1}}項(xiàng)/共{{SmallItem.length}}項(xiàng)
? ? ? ? </view>
? ? ? ? <view class="radioView">
? ? ? ? ? ? <!-- 核選項(xiàng)的單選框 -->
? ? ? ? ? ? <radio-group bindchange="radioChange" data-index="{{index}}">
? ? ? ? ? ? ? ? <radio value="符合">符合</radio> <!--前面有兩個(gè)中文全角空格-->
? ? ? ? ? ? ? ? <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 {
? ? /* 核選項(xiàng)名稱view */
? ? background-color: white;
? ? margin-bottom: 2px;
? ? border-radius: 3px;
? ? padding: 2px;
}
.SmallItemName>label {
? ? display: block;
? ? font-weight: bold;
}
.SmallItemContent {
? ? /* 核選項(xiàng)內(nèi)容 */
? ? 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: "核選項(xiàng)1", itemType: "核選項(xiàng)", itemContent: "核選項(xiàng)內(nèi)容1", AccordWith: "未選", textareaContent: "" },
? ? ? ? ? ? { itemID: "2", itemName: "核選項(xiàng)2", itemType: "核選項(xiàng)", itemContent: "核選項(xiàng)內(nèi)容2", AccordWith: "未選", textareaContent: "" },
? ? ? ? ? ? { itemID: "3", itemName: "核選項(xiàng)3", itemType: "核選項(xiàng)", itemContent: "核選項(xiàng)內(nèi)容3", AccordWith: "未選", textareaContent: "" },
? ? ? ? ? ? { itemID: "4", itemName: "核選項(xiàng)4", itemType: "核選項(xiàng)", itemContent: "核選項(xiàng)內(nèi)容4", AccordWith: "未選", textareaContent: "" },
? ? ? ? ? ? { itemID: "5", itemName: "核選項(xiàng)5", itemType: "核選項(xiàng)", itemContent: "核選項(xiàng)內(nèi)容5", AccordWith: "未選", textareaContent: "" },
? ? ? ? ? ? { itemID: "6", itemName: "核選項(xiàng)6", itemType: "核選項(xiàng)", itemContent: "核選項(xiàng)內(nèi)容6", AccordWith: "未選", textareaContent: "" }
? ? ? ? ]
? ? },
? ? radioChange: function(e) {
? ? ? ? // console.log("radio的值為：" + e.detail.value); //獲取radio的值
? ? ? ? // console.log("元素下標(biāo)為：" + e.currentTarget.dataset.index); //獲取元素在數(shù)組中的下標(biāo)
? ? ? ? let ValRadio = e.detail.value;
? ? ? ? let EleIndex = e.currentTarget.dataset.index;
? ? ? ? let key = 'SmallItem[' + EleIndex + '].AccordWith';
? ? ? ? //更改數(shù)組SmallItem[EleIndex]中AccordWith的值
? ? ? ? this.setData({
? ? ? ? ? ? [key]: ValRadio
? ? ? ? });
? ? ? ? // console.log("SmallItem數(shù)組改變后", this.data.SmallItem);
? ? },
? ? HXXSubmit: function(e) {
? ? ? ? //點(diǎn)擊提交按鈕，會(huì)獲取data中的數(shù)組SmallItem，并且遍歷其中的AccordWith屬性的值
? ? ? ? //若有AccordWith的值為“未選”，則彈出提示框，且事件執(zhí)行結(jié)束
? ? ? ? //否則將數(shù)組傳回后臺(tái)，進(jìn)行保存
? ? ? ? let arSmallItem = this.data.SmallItem; //獲取data中的數(shù)組SmallItem
? ? ? ? for (let i = 0; i < arSmallItem.length; i++) {
? ? ? ? ? ? //遍歷數(shù)組
? ? ? ? ? ? if (arSmallItem[i].AccordWith == "未選") {
? ? ? ? ? ? ? ? // console.log(arSmallItem[i].itemName + "未進(jìn)行選擇，請(qǐng)選擇后提交");
? ? ? ? ? ? ? ? wx.showToast({
? ? ? ? ? ? ? ? ? ? title: '第' + (i + 1) + '項(xiàng)未進(jìn)行核選\n請(qǐng)核選后提交',
? ? ? ? ? ? ? ? ? ? icon: 'none',
? ? ? ? ? ? ? ? ? ? duration: 2000
? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? return;
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? console.log("所有核選項(xiàng)已選擇");
? ? ? ? //程序能執(zhí)行到這里，說明所有核選項(xiàng)都已經(jīng)進(jìn)行了選擇，可以進(jìn)行數(shù)據(jù)保存操作
? ? ? ? // 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; //獲取元素在數(shù)組中的下標(biāo)
? ? ? ? let content = e.detail.value; //獲取在文本域中輸入的值
? ? ? ? let key = 'SmallItem[' + index + '].textareaContent';
? ? ? ? this.setData({
? ? ? ? ? ? [key]: content
? ? ? ? });
? ? ? ? console.log("SmallItem數(shù)組改變后", this.data.SmallItem);
? ? }
})當(dāng)存在核選項(xiàng)未進(jìn)行選擇時(shí)，點(diǎn)擊保存，彈窗提醒效果圖
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
仿淘寶首頁(yè)分類列表效果實(shí)現(xiàn)代碼
模板淘寶首頁(yè)的分類列表效果，17173的游戲分類效果也不錯(cuò)。2009-04-04
這篇文章主要介紹了JavaScript格式化json和xml的方法,結(jié)合實(shí)例形式分析了javascript格式化json及格式化xml數(shù)據(jù)的具體操作技巧,需要的朋友可以參考下2019-01-01
JS實(shí)現(xiàn)雙擊內(nèi)容變?yōu)榭删庉嫚顟B(tài)
在一些網(wǎng)站上我們經(jīng)?？吹浇换バ院軓?qiáng)的功能。一些用戶資料可以直接雙擊出現(xiàn)文本框，并在此輸入新的資料即可修改，無需再按確定按鈕等。怎么實(shí)現(xiàn)的呢？今天小編給大家分享JS實(shí)現(xiàn)雙擊內(nèi)容變?yōu)榭删庉嫚顟B(tài)，需要的的朋友參考下2017-03-03
微信小程序?qū)W習(xí)筆記之函數(shù)定義、頁(yè)面渲染圖文詳解
這篇文章主要介紹了微信小程序?qū)W習(xí)筆記之函數(shù)定義、頁(yè)面渲染,結(jié)合實(shí)例形式較為詳細(xì)的分析了微信小程序中函數(shù)的定義、生命周期、模板調(diào)用、樣式控制等操作技巧,并配合圖文形式進(jìn)行了詳細(xì)說明,需要的朋友可以參考下2019-03-03
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
詳解promise.then,process.nextTick, setTimeout 以及 setImmediate的
這篇文章主要介紹了詳解promise.then,process.nextTick, setTimeout 以及 setImmediate的執(zhí)行順序2018-11-11
Javascript設(shè)計(jì)模式之發(fā)布訂閱模式
發(fā)布---訂閱模式又叫觀察者模式，它定義了對(duì)象間的一種一對(duì)多的關(guān)系，讓多個(gè)觀察者對(duì)象同時(shí)監(jiān)聽某一個(gè)主題對(duì)象，當(dāng)一個(gè)對(duì)象發(fā)生改變時(shí)，所有依賴于它的對(duì)象都將得到通知2022-12-12
這篇文章主要為大家詳細(xì)介紹了原生JS生成指定位數(shù)的驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
JavaScript中const關(guān)鍵字的用法及特性
該文章講解了JavaScript中const關(guān)鍵字的用法以及它的一些特性，該關(guān)鍵字用于創(chuàng)建常量，即一旦賦值之后就不能再修改，但是，使用?const創(chuàng)建的對(duì)象和數(shù)組卻可以被修改，本文通過講解“賦值”和“變異”之間的重要區(qū)別，詳細(xì)解釋了這一現(xiàn)象,需要的朋友可以參考下2023-05-05
原生JavaScript實(shí)現(xiàn)購(gòu)物車
這篇文章主要為大家詳細(xì)介紹了原生JavaScript實(shí)現(xiàn)購(gòu)物車，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01