小程序 | 微信小程序实现循环嵌套数据选择

一、效果展示

二、代码实现

在.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;// 将其他按钮选择状态置falsefor (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;}}// 将选择的按钮选择状态置truecontent[selectIndex].timeFrame[attrIndex].isSelect = true;that.setData({serviceTime: content,selectDay: content[selectIndex].day,selectMonth: content[selectIndex].month,selectTime: content[selectIndex].timeFrame[attrIndex].time,})},
})

小程序 | 微信小程序实现循环嵌套数据选择相关推荐

小程序源码：修复图片音频全新升级带特效喝酒神器小游戏微信小程序
这是一款全新升级带特效喝酒神器小游戏微信小程序源码小编发现很多喝酒神器小程序都不带特效和音效的感觉差了那么一点意思而且感觉也不炫酷所以小编今天给大家带来一款带特效,音效炫酷的喝酒神器该款神器由 ...
微信小程序----微信小程序浏览pdf文件
微信小程序----微信小程序浏览pdf文件说明:通过wx.downloadFile,wx.openDocumen来实现打开pdf文件.只需在js操作即可. HTTP.Config.Request(' ...
小程序源码：炫酷手持滚动弹幕生成小工具微信小程序-多玩法安装简单
这是一款滚动弹幕生成微信小程序源码让弹幕文字在手机屏幕上跑起来,LED弹幕手机弹幕,告白神奇,等支持多种模板,每一种模板都支持自定义颜色等等字体跳动,字体表白等等另外用户也可以支持自定义文字 ...
微信小程序—微信小程序端支付代码
只有微信小程序端的代码,如下 Page({data: {},onLoad: function (options) {// 页面初始化 options为页面跳转所带来的参数var that = this ...
小程序 | 微信小程序实现商品分类列表
小程序 | 微信小程序实现商品分类列表一.效果展示二.代码实现  <view class="container"> <! ...
生鲜小程序微信小程序怎么制作临沂修齐网络专业制作微信小程序
生鲜小程序微信小程序怎么制作临沂修齐网络专业制作微信小程序生鲜小程序开发功能介绍: 1.产品展示:通过扫码或者搜索小程序,用户可以看到不同品种的新鲜蔬菜.水果以及肉类. 2.定时收货:买家可以预 ...
微信小程序：娱乐小工具微信小程序源码下载支持多种流量主
这应该是属于娱乐小工具呢还是属于工具箱类型就看你们怎么分辨了当然啦说是娱乐也可以,里面功能应该也属于娱乐性如果说是工具类型也可以,里面也属于工具吧该程序由几个小功能组合而成如有: 网易云音乐下载 ...
抛硬币小游戏微信小程序源码
简介: 抛硬币小游戏微信小程序源码日常生活中遇到选择?抛个硬币看看天意吧! 有了这个小程序,起不起床拋一下,叫不叫外卖拋一下,打不打扫房间拋一下,让生活充满乐趣~ 人生决定不了的决定就让上天来决定吧 ...
小程序 | 微信小程序中使用位置API打开地图
小程序 | 微信小程序中使用位置API打开地图一.效果展示二.代码实现使用微信内置地图查看位置,调用wx.openLocationAPI,具体内容可以查看微信官方文档. // js let In ...

小程序 | 微信小程序实现循环嵌套数据选择

小程序 | 微信小程序实现循环嵌套数据选择

一、效果展示

二、代码实现

小程序 | 微信小程序实现循环嵌套数据选择相关推荐

最新文章

热门文章