小知识：
wx:for="{{list}}"用来循环数组。
wx:for-item=‘变量名（随便起）’ 它是指定循环数据当前的变量名，可以通过 {{变量名.属性}} 展示数组的元素。
wx:for-index=‘变量名（随便起）’，它是指向当前元素的下标名，可以在其他事件中定义自定义事件（data-xxx='{{变量名}}'，，该自定义属性可以在参数e下面打印出来）获取该下标。
思考：二维甚至多维数组应该如何遍历？
例题：
列表数据如图所示：
例题采用了scroll-view和swiper组件。代码如下：
new_canteen.js：
// pages/canteen/new_canteen.js
const app = getApp();
Page({/** 页面的初始数据*/data: {navigationSetting:{title:'食堂',height: app.globalData.navBarHeight,paddingTop: app.globalData.statusBarHeight,// backgroundColor:'red',size:'default'},tabList: ['一粟堂', '三清园', '七品居','九华厅'],tabNow: 0, //当前选中的tab标签索引search: "",tradeList: [['从前说','千千万万','千千万万','千千万万','千千万万'],['我记得']], //对应tab显示的商家列表list:[ //搜索后的list内容列表{Name:"一粟堂",arr:[{title: '烧卤家族', sale: 358, rating: 4.9, consumption: 15},{title: '烧卤家族', sale: 518, rating: 4.9, consumption: 35},{title: '烧卤家族', sale: 138, rating: 4.9, consumption: 23},]},{Name:"三清园",arr:[{title: '汉味小吃', sale: 156, rating: 4.9, consumption: 25},{title: '汉味小吃', sale: 324, rating: 4.9, consumption: 17},]},{Name:"七品居",arr:[{title: '古茗', sale: 156, rating: 4.9, consumption: 25},{title: '古茗', sale: 351, rating: 4.9, consumption: 19},{title: '古茗', sale: 324, rating: 4.9, consumption: 17},]},{Name:"九华厅",arr:[{title: '汉味小吃', sale: 156, rating: 4.9, consumption: 25},]}],},selectTab (e) { //切换不同的tabthis.setData({tabNow: e.currentTarget.dataset.id})},handleSwiperChange(e) { //对应改变tabthis.setData({tabNow: e.detail.current})},getContent(e) {console.log("主页：",e)this.setData({search: e.detail})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})new_canteen.json：
{"usingComponents": {"navigation":"../../components/navbar/navbar","search": "/components/search/search"},"navigationStyle": "custom","navigationBarTextStyle": "black"
}new_canteen.wxml：
<!--pages/canteen/new_canteen.wxml-->
<navigation defaultSetting="{{navigationSetting}}"></navigation><!--pages/list/trade_company.wxml-->
<!-- <view class="head flex-row"><view class="head-title">食堂</view>
</view> -->
<scroll-view scroll-y class="container"><view class="container-head"><!--Tab选项卡--><scroll-view scroll-x class="scroll_view" scroll-with-animation="true" enable-flex="true"> <view class="tab"> <view class="tab_item {{ tabNow === index ? 'select' : '' }}" wx:for="{{ tabList }}" data-id="{{ index }}" wx:key="index" bindtap="selectTab"> {{ item }} </view> </view></scroll-view></view><search bind:Searchcontent="getContent" ></search><!--下方内容显示--><swiper class="container-swiper" current="{{tabNow}}" bindchange="handleSwiperChange"><swiper-item wx:for="{{list}}" wx:key="index" ><scroll-view class='container-swiper-sc' enable-flex="true"><view class="mendian-list" style="width: 94%; margin-left: 3%;"><block wx:for="{{ list[tabNow].arr }}" wx:for-item="map"><navigator class="mendian-info" url="../canteen/detail"><image class="thumb" src="../../img/大活.png" pb="100"></image><div class="mendian-text"><div class="title">{{map.title}}</div><view class="qisong-juli flex-between" style="font-size: small;"><image src="../../img/ratingstar.png" mode="aspectFit" style="width: 15px;height: 15px;"></image><text style="margin-left: 5px; color: red; background-color: pink;">{{map.rating}}</text><text style="margin-left: 15px;">月售：{{map.sale}}</text><view>人均消费：{{map.consumption}}元/人</view></view></div></navigator></block></view></scroll-view></swiper-item></swiper></scroll-view>new_canteen.wxss：
/* pages/canteen/new_canteen.wxss */
page {height: 100%;/*页面高度为屏幕的高度*/
}
.head {position: fixed;height: 13%; width: 100%;color: #333;font-size: 30rpx;font-weight: bold;padding-bottom: 10rpx;box-sizing: border-box;
}
.head-title {position: relative;display: inline-block;height: 100%;
}
.head-title::after {content: '';position: absolute;z-index: 99;width: 15px;height: 15px;margin-left: -15rpx;border-top: 3px solid #333;border-right: 3px solid #333;border-top-right-radius: 100%;transform: rotate(-225deg);left: 50%;bottom: 3px;
}
.container {width: 100%;background-color: #fff;overflow: hidden;/* border-radius: 30rpx 30rpx 0 0; */padding: 0 0;
}
.container-head {width: 100%;box-sizing: border-box;}
.scroll_view {height: 80rpx;border-radius: 50rpx;/* background-color: #eeece4; */white-space: nowrap;/*不换行*/}.scroll_view .tab {/* padding: 0 10rpx; */line-height: 65rpx;display: inline-block;text-align: center;height: 80rpx;vertical-align: top;/*防止高度塌陷*/
}
/*激活当前tab样式*/
.scroll_view .select {/* color: #1067D1; */font-size: larger;font-weight: bold;border-bottom: 18px solid #F6CB48;
}
.tab .tab_item {height: 70rpx;display: inline-block;line-height: 90rpx;margin: 0 26rpx;padding: 0 20rpx;flex: 1;
}
.container-swiper {height: 100%;display: flex;flex-direction: column;flex-flow: column;
}
.container-swiper-sc {height: 100%;
}
.container-swiper-sc .items {padding: 0 2%;width: 100%;box-sizing: border-box;}.container-swiper-sc .items .item-img {width: 30vw;height: 30vw;margin-right: 2.8%;margin-bottom: 10rpx;flex-shrink: 0;}.container-swiper-sc .items .item-img:nth-child(3n+3) {margin-right: 0;}/* 商家列表展示 */
/*列表展示*/
.mendian-list .mendian-info {display: flex;padding: 8px;margin-top: 16rpx;border-radius: 20px;/* border-bottom: 1px #dedede dashed; */border: 2px solid #A9A9A9;/* background-color: #D7EEFC; */
}
.mendian-list .mendian-info:last-child {/* border-bottom: none; */margin-bottom: 3px;
}
.mendian-list .thumb {width: 70px;height: 70px;flex-shrink: 0;margin-right: 15px;border-radius: 10px;background-color: blue;
}
.mendian-list .mendian-text {flex-grow: 1;flex-shrink: 1;display: flex;justify-content: space-between;flex-flow: column;
}
.mendian-list .title {font-size: 18px;font-weight: 600;/* text-align: center; */color: #484848;margin-top: 5px;
}小图片：
实现效果：
效果展示
