微信小程序?qū)崿F(xiàn)循環(huán)嵌套數(shù)據(jù)選擇

更新時間：2022年05月23日 10:33:14 作者：J1FengZ

這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)循環(huán)嵌套數(shù)據(jù)選擇，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序?qū)崿F(xiàn)循環(huán)嵌套數(shù)據(jù)選擇的具體代碼，供大家參考，具體內(nèi)容如下

一、效果展示

二、代碼實現(xiàn)

在.wxml文件中,有時從后臺傳來的數(shù)據(jù)可能會出現(xiàn)數(shù)組嵌套數(shù)組的情況，需要利用wx:for嵌套實現(xiàn)數(shù)據(jù)的展示。這時，外層循環(huán)正常循環(huán)，內(nèi)層循環(huán)需要利用wx:for-item將item重新命名。

<scroll-view scroll-y class="scrollTime">
?? ?<view?
?? ??? ?class="dateItem"?
?? ??? ?wx:for="{{serviceTime}}"?
?? ??? ?wx:key="date"?
?? ??? ?wx:for-index="id"?
?? ??? ?data-index="{{index}}">
?? ??? ?<view class="date">
?? ??? ??? ?<text class="dateTxt">{{item.month}}月{{item.day}}日</text>
?? ??? ?</view>
?? ??? ?<view class="time">
? ? ? ? ? ? <block wx:for="{{item.timeFrame}}" wx:key="items" wx:for-item="items">
? ? ? ? ? ? ? ? <view?
? ? ? ? ? ? ? ? ? ? wx:if="{{items.number !== 0}}"
? ? ? ? ? ? ? ? ? ? class="{{items.isSelect ? 'timeItem-active' : 'timeItem'}}"
? ? ? ? ? ? ? ? ? ? data-select-index="{{id}}"?
? ? ? ? ? ? ? ? ? ? data-attr-index="{{index}}"
? ? ? ? ? ? ? ? ? ? data-content="{{serviceTime}}"
? ? ? ? ? ? ? ? ? ? bindtap="bindleTimeItemTap" >
? ? ? ? ? ? ? ? ? ? <text class="timeTxt">{{items.time}}</text>
? ? ? ? ? ? ? ? ? ? <view >
? ? ? ? ? ? ? ? ? ? ? ? <text class="numberTxt">剩余：</text>
? ? ? ? ? ? ? ? ? ? ? ? <text class="number">{{items.number}}</text>
? ? ? ? ? ? ? ? ? ? </view>
? ? ? ? ? ? ? ? ? ? <view class="selectItem" wx:if="{{items.isSelect}}">
? ? ? ? ? ? ? ? ? ? ? ? <image class="image-select" src="../../../icons/label_select.png"/>
? ? ? ? ? ? ? ? ? ? </view>
? ? ? ? ? ? ? ? </view>
? ? ? ? ? ? ? ? <view wx:else class="timeItem-None">
? ? ? ? ? ? ? ? ? ? <text class="timeTxt-full">{{items.time}}</text>
? ? ? ? ? ? ? ? ? ? <text class="numberTxt-full">已滿</text>
? ? ? ? ? ? ? ? </view>
? ? ? ? ? ? </block>
?? ??? ?</view>
?? ?</view>
?? ?<view class="scrollViewFooter">
?? ??? ?<text class="footerTxt">沒有更多了</text>
?? ?</view>
</scroll-view>

選擇某一個數(shù)據(jù)時，需要在數(shù)據(jù)對象中添加一個是否選中的字段，將未被選擇的數(shù)據(jù)置false，選擇的數(shù)據(jù)置true，實現(xiàn)選中后樣式的更改。

// 假數(shù)據(jù)結(jié)構(gòu)
let serviceTime = [
?? ?{
?? ??? ?day : 1,
?? ??? ?month : 8,?
?? ??? ?timeFrame : [
?? ??? ??? ?{
?? ??? ??? ??? ?time : '8:00-10:00',
?? ??? ??? ??? ?number : 2,
?? ??? ??? ?},
?? ??? ??? ?{
?? ??? ??? ??? ?time : '10:00-12:00',
?? ??? ??? ??? ?number : 0,
?? ??? ??? ?},
?? ??? ??? ?{
?? ??? ??? ??? ?time : '14:00-16:00',
?? ??? ??? ??? ?number : 2,
?? ??? ??? ?},
?? ??? ?]
?? ?},
];

Page({
?? ?/**
?? ? * 頁面的初始數(shù)據(jù)
?? ? */
?? ?data: {
?? ??? ?serviceTime : serviceTime,
?? ??? ?selectDay : null,
?? ??? ?selectMonth : null,
?? ??? ?selectTime : null,
?? ?},
?? ?
?? ?/**
?? ? * scroll-view中組件選擇點擊事件-時間 獲取當前選擇時間
?? ? */
?? ?bindleTimeItemTap(e) {
?? ??? ?let that = this;
?? ??? ?let selectIndex = e.currentTarget.dataset.selectIndex;
?? ??? ?let attrIndex = e.currentTarget.dataset.attrIndex;
?? ??? ?let content = e.currentTarget.dataset.content;
?? ??? ?var cnt = content.length;
?? ??? ?// 將其他按鈕選擇狀態(tài)置false
?? ??? ?for (var i = 0; i < cnt ; i++){
?? ??? ??? ?var count = content[i].timeFrame.length;
?? ??? ??? ?for (var j = 0; j < count; j++) {
?? ??? ??? ??? ?content[i].timeFrame[j].isSelect = false;
?? ??? ??? ?}
?? ??? ?}
?? ??? ?// 將選擇的按鈕選擇狀態(tài)置true
?? ??? ?content[selectIndex].timeFrame[attrIndex].isSelect = true;
?? ??? ?that.setData({
?? ??? ??? ?serviceTime: content,
?? ??? ??? ?selectDay: content[selectIndex].day,
?? ??? ??? ?selectMonth: content[selectIndex].month,
?? ??? ??? ?selectTime: content[selectIndex].timeFrame[attrIndex].time,
?? ??? ?})
?? ?},
})

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

您可能感興趣的文章: