微信小程序?qū)崿F(xiàn)循環(huán)嵌套數(shù)據(jù)選擇
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)循環(huán)嵌套數(shù)據(jù)選擇的具體代碼,供大家參考,具體內(nèi)容如下
一、效果展示
二、代碼實(shí)現(xiàn)
在.wxml文件中,有時(shí)從后臺(tái)傳來的數(shù)據(jù)可能會(huì)出現(xiàn)數(shù)組嵌套數(shù)組的情況,需要利用wx:for嵌套實(shí)現(xiàn)數(shù)據(jù)的展示。這時(shí),外層循環(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>
選擇某一個(gè)數(shù)據(jù)時(shí),需要在數(shù)據(jù)對(duì)象中添加一個(gè)是否選中的字段,將未被選擇的數(shù)據(jù)置false,選擇的數(shù)據(jù)置true,實(shí)現(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中組件選擇點(diǎn)擊事件-時(shí)間 獲取當(dāng)前選擇時(shí)間 ?? ? */ ?? ?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, ?? ??? ?}) ?? ?}, })
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript強(qiáng)大的日期函數(shù)代碼分享
這篇文章介紹了javascript強(qiáng)大的日期函數(shù)代碼,有需要的朋友可以參考一下2013-09-09js中字符串編碼函數(shù)escape()、encodeURI()、encodeURIComponent()區(qū)別詳解
JavaScript中有三個(gè)可以對(duì)字符串編碼的函數(shù),分別是: escape,encodeURI,encodeURIComponent,相應(yīng)3個(gè)解碼函數(shù):unescape,decodeURI,decodeURIComponent 。接下來通過本文給大家介紹三者之家的區(qū)別,感興趣的朋友一起學(xué)習(xí)吧2016-04-04提高JavaScript執(zhí)行效率的23個(gè)實(shí)用技巧
JavaScript是一門非常流行的編程語言,許多開發(fā)者都會(huì)把JavaScript選為入門語言,本文向大家分享JavaScript提高執(zhí)行效率的小技巧、最佳實(shí)踐等非常實(shí)用的內(nèi)容2017-03-03JavaScript實(shí)現(xiàn)多叉樹的遞歸遍歷和非遞歸遍歷算法操作示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)多叉樹的遞歸遍歷和非遞歸遍歷算法,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript多叉樹針對(duì)json節(jié)點(diǎn)的遞歸與非遞歸遍歷相關(guān)操作技巧,需要的朋友可以參考下2018-02-02JavaScript中的property和attribute介紹
JavaScript中的property和attribute介紹,需要的朋友可以參考下。2011-12-12JavaScript對(duì)數(shù)組進(jìn)行隨機(jī)重排的方法
這篇文章主要介紹了JavaScript對(duì)數(shù)組進(jìn)行隨機(jī)重排的方法,實(shí)例分析了javascript實(shí)現(xiàn)數(shù)組隨機(jī)重新排序的兩種實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07