微信小程序（二十六）列表渲染基础核心

最新推荐文章于 2024-09-30 12:58:13 发布

代码对我眨眼睛

最新推荐文章于 2024-09-30 12:58:13 发布

阅读量781

点赞数 5

分类专栏： # 微信小程序文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/m0_73756108/article/details/135902458

版权

微信小程序专栏收录该内容

66 篇文章 19 订阅

订阅专栏

本文介绍了在微信小程序中如何使用WXML进行列表渲染，包括基本写法、外部索引和自身索引的应用，以及关键代码示例和实际效果展示。

摘要由CSDN通过智能技术生成

注释很详细，直接上代码

新增内容：

1.列表渲染基础写法

2.外部索引和自身索引

源码：

index.wxml

<view class="students">
    <view class="item">
        <text>序号</text>
        <text>姓名</text>
        <text>年龄</text>
        <text>性别</text>
    </view>
    <!--
         1. 循环单元项：item（默认名）
         2. 循环单元项下标：index
         3. 索引wx:key（一般使用自己准备好的，如果没有则可以使用自身“*this”作为索引）
            索引不写会有警告
    -->
    <view wx:for="{{students}}" wx:key="id" class="item">
        <text>{{item.id}}</text>
        <text>{{item.name}}</text>
        <text>{{item.age}}</text>
        <text>{{item.gender}}</text>
    </view>
</view>

index.wxss

.item{
    display: flex;
    /* 水平均分 */
    justify-content:space-evenly;
}

index.js

Page({
    data:{
           students:[
               {id:1,name:"阿猫",age:20,gender:"男"},
               {id:2,name:"阿狗",age:19,gender:"女"},
               {id:3,name:"阿猪",age:18,gender:"男"}
           ]
        }
})