微信小程序實現循環嵌套數據選擇
本文實例為大傢分享瞭微信小程序實現循環嵌套數據選擇的具體代碼，供大傢參考，具體內容如下
一、效果展示
二、代碼實現
在.wxml文件中,有時從後臺傳來的數據可能會出現數組嵌套數組的情況，需要利用wx:for嵌套實現數據的展示。這時，外層循環正常循環，內層循環需要利用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>
選擇某一個數據時，需要在數據對象中添加一個是否選中的字段，將未被選擇的數據置false，選擇的數據置true，實現選中後樣式的更改。
// 假數據結構
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({
/**
* 頁面的初始數據
*/
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;
// 將其他按鈕選擇狀態置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;
}
}
// 將選擇的按鈕選擇狀態置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,
})
},
})
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。