最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

微信小程序單選框組應(yīng)用詳解

 更新時間:2022年07月19日 09:45:38   作者:不大好不大好  
這篇文章主要為大家詳細(xì)介紹了微信小程序單選框組應(yīng)用,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序單選框組應(yīng)用的具體代碼,供大家參考,具體內(nèi)容如下

需求概述

有一個核選項數(shù)組,里面存放著核選項名稱、內(nèi)容、ID、選擇狀態(tài)。選擇狀態(tài)有未選擇、符合、不符合三種,默認(rèn)全部為未選擇。通過wx:for將數(shù)組渲染到頁面,每個核選項都有兩個單選按鈕,分別是符合和不符合按鈕,點擊對應(yīng)按鈕會將改變對應(yīng)那條元素中的選擇狀態(tài)的值,且點擊不符合時,會顯示出一個文本域,讓用戶輸入不符合原因。

頁面最下面有一個提交按鈕,點擊時會遍歷核選項數(shù)組,若有選擇狀態(tài)為未選擇的項,則無法提交,并提醒。

效果圖如下

直接上代碼

wxml文件

<block wx:for="{{SmallItem}}" wx:key="itemID">
? ? <view class="SmallItemView">
? ? ? ? <view class="infoView">
? ? ? ? ? ? <!-- 核選項的基本信息,例如名稱、內(nèi)容 -->
? ? ? ? ? ? <view class="SmallItemName">
? ? ? ? ? ? ? ? <label for="">核選項名稱:</label>
? ? ? ? ? ? ? ? <text>{{item.itemName}}</text>
? ? ? ? ? ? </view>
? ? ? ? ? ? <view class="SmallItemContent" >
? ? ? ? ? ? ? ? <label for="">核選項內(nèi)容:</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 {
? ? /* 核選項內(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: "核選項1", itemType: "核選項", itemContent: "核選項內(nèi)容1", AccordWith: "未選", textareaContent: "" },
? ? ? ? ? ? { itemID: "2", itemName: "核選項2", itemType: "核選項", itemContent: "核選項內(nèi)容2", AccordWith: "未選", textareaContent: "" },
? ? ? ? ? ? { itemID: "3", itemName: "核選項3", itemType: "核選項", itemContent: "核選項內(nèi)容3", AccordWith: "未選", textareaContent: "" },
? ? ? ? ? ? { itemID: "4", itemName: "核選項4", itemType: "核選項", itemContent: "核選項內(nèi)容4", AccordWith: "未選", textareaContent: "" },
? ? ? ? ? ? { itemID: "5", itemName: "核選項5", itemType: "核選項", itemContent: "核選項內(nèi)容5", AccordWith: "未選", textareaContent: "" },
? ? ? ? ? ? { itemID: "6", itemName: "核選項6", itemType: "核選項", itemContent: "核選項內(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) {
? ? ? ? //點擊提交按鈕,會獲取data中的數(shù)組SmallItem,并且遍歷其中的AccordWith屬性的值
? ? ? ? //若有AccordWith的值為“未選”,則彈出提示框,且事件執(zhí)行結(jié)束
? ? ? ? //否則將數(shù)組傳回后臺,進(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)行選擇,請選擇后提交");
? ? ? ? ? ? ? ? wx.showToast({
? ? ? ? ? ? ? ? ? ? title: '第' + (i + 1) + '項未進(jìn)行核選\n請核選后提交',
? ? ? ? ? ? ? ? ? ? icon: 'none',
? ? ? ? ? ? ? ? ? ? duration: 2000
? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? return;
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? console.log("所有核選項已選擇");
? ? ? ? //程序能執(zhí)行到這里,說明所有核選項都已經(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)存在核選項未進(jìn)行選擇時,點擊保存,彈窗提醒效果圖

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 微信小程序?qū)崿F(xiàn)下拉刷新動畫

    微信小程序?qū)崿F(xiàn)下拉刷新動畫

    這篇文章主要為大家詳細(xì)介紹了微信小程序動畫實現(xiàn)下拉刷新動畫,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-06-06
  • js調(diào)試系列 控制臺命令行API使用方法

    js調(diào)試系列 控制臺命令行API使用方法

    上次初步介紹了什么是控制臺,以及簡單的 console.log 輸出信息。最后還有兩個小問題,我們就當(dāng)回顧,來看下怎么操作吧
    2014-06-06
  • JavaScript模擬數(shù)組合并concat

    JavaScript模擬數(shù)組合并concat

    這篇文章主要介紹了JavaScript模擬數(shù)組合并concat的相關(guān)資料,需要的朋友可以參考下
    2016-03-03
  • JavaScript實現(xiàn)下拉列表選擇框

    JavaScript實現(xiàn)下拉列表選擇框

    這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)下拉列表選擇框,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-10-10
  • JavaScript 中判斷變量是否為數(shù)字的示例代碼

    JavaScript 中判斷變量是否為數(shù)字的示例代碼

    這篇文章主要介紹了JavaScript 中判斷變量是否為數(shù)字的示例代碼,代碼簡單易懂對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-10-10
  • Javascript顯示和隱藏ul列表的方法

    Javascript顯示和隱藏ul列表的方法

    這篇文章主要介紹了Javascript顯示和隱藏ul列表的方法,涉及javascript針對頁面元素遍歷及顯示與隱藏的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-07-07
  • 遍歷json 對象的屬性并且動態(tài)添加屬性的實現(xiàn)

    遍歷json 對象的屬性并且動態(tài)添加屬性的實現(xiàn)

    下面小編就為大家?guī)硪黄闅vjson 對象的屬性并且動態(tài)添加屬性的實現(xiàn)。小編覺的挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-12-12
  • confirm確認(rèn)對話框的實現(xiàn)方法總結(jié)

    confirm確認(rèn)對話框的實現(xiàn)方法總結(jié)

    下面小編就為大家?guī)硪黄猚onfirm確認(rèn)對話框的實現(xiàn)方法總結(jié)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-06
  • JavaScript編碼風(fēng)格精選指南(編寫可維護(hù)的代碼規(guī)范)

    JavaScript編碼風(fēng)格精選指南(編寫可維護(hù)的代碼規(guī)范)

    javascript編碼規(guī)范能夠增強代碼的簡潔性、可讀性、可擴(kuò)展性,項目做到后期,每修改一次,所耗費的成本就越高,編碼規(guī)范能節(jié)省這樣的成本,并且能很好拓展升級原有系統(tǒng)功能,javascript編碼規(guī)范也是開源社區(qū)大家約定俗成的規(guī)則!
    2024-06-06
  • ES6   Promise基礎(chǔ)用法(resolve、reject、then、catch,all)

    ES6   Promise基礎(chǔ)用法(resolve、reject、then、catch,a

    Promise是JavaScript中處理異步操作的對象,它有三種狀態(tài):Pending、Fulfilled、Rejected,使用new Promise創(chuàng)建Promise對象,通過resolve和reject改變狀態(tài),then和catch方法用于處理成功和失敗的結(jié)果,本文介紹ES6 Promise用法,感興趣的朋友一起看看吧
    2024-09-09

最新評論

宜宾县| 攀枝花市| 安国市| 广宁县| 靖安县| 齐河县| 无为县| 定安县| 万盛区| 东兰县| 邛崃市| 抚顺市| 贞丰县| 启东市| 大邑县| 马鞍山市| 上杭县| 仙居县| 定南县| 皮山县| 太和县| 桐柏县| 峨眉山市| 小金县| 红河县| 股票| 仁布县| 曲沃县| 扶绥县| 扎兰屯市| 和龙市| 巴彦县| 博兴县| 潞城市| 潢川县| 延川县| 曲水县| 石柱| 辉县市| 旬邑县| 平度市|