小知識：

wx:for="{{list}}"用來循環(huán)數(shù)組。

wx:for-item=‘變量名（隨便起）’ ? 它是指定循環(huán)數(shù)據(jù)當前的變量名，可以通過 ?{{變量名.屬性}} 展示數(shù)組的元素。

wx:for-index=‘變量名（隨便起）’，它是指向當前元素的下標名，可以在其他事件中定義自定義事件（data-xxx='{{變量名}}'，，該自定義屬性可以在參數(shù)e下面打印出來）獲取該下標。

?思考：二維甚至多維數(shù)組應該如何遍歷？

例題：?

列表數(shù)據(jù)如圖所示：?

?

例題采用了scroll-view和swiper組件。代碼如下：

new_canteen.js：

// pages/canteen/new_canteen.js
const app = getApp();
Page({
    /** 頁面的初始數(shù)據(jù)*/
    data: {
        navigationSetting:{
            title:'食堂',
            height: app.globalData.navBarHeight,
            paddingTop: app.globalData.statusBarHeight,
            // backgroundColor:'red',
            size:'default'
        },
        tabList: ['一粟堂', '三清園', '七品居','九華廳'],
        tabNow: 0, //當前選中的tab標簽索引
        search: "",
        tradeList: [['從前說','千千萬萬','千千萬萬','千千萬萬','千千萬萬'],['我記得']], //對應tab顯示的商家列表
        list:[ //搜索后的list內(nèi)容列表
            {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) { //切換不同的tab
        this.setData({
            tabNow: e.currentTarget.dataset.id
        })
    },
    handleSwiperChange(e) { //對應改變tab
        this.setData({
          tabNow: e.detail.current
        })
    },
    getContent(e) {
        console.log("主頁：",e)
        this.setData({
          search: e.detail
        })
    },

    /**
     * 生命周期函數(shù)--監(jiān)聽頁面加載
     */
    onLoad: function (options) {

    },

    /**
     * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函數(shù)--監(jiān)聽頁面顯示
     */
    onShow: function () {

    },

    /**
     * 生命周期函數(shù)--監(jiān)聽頁面隱藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函數(shù)--監(jiān)聽頁面卸載
     */
    onUnload: function () {

    },

    /**
     * 頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 頁面上拉觸底事件的處理函數(shù)
     */
    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>
    <!--下方內(nèi)容顯示-->
    <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;
}

小圖片：

實現(xiàn)效果：?

?文章來源地址http://www.zghlxwxcb.cn/news/detail-613433.html

到了這里，關于微信小程序--列表展示的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！