微信小程序--列表展示-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序--列表展示。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

小知识：

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) { //切换不同的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
        })
    },

    /**
     * 生命周期函数--监听页面加载
     */
    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;
}

小图片：