微信小程序(二十七)列表渲染改变量名

注释很详细,直接上代码

上一篇

新增内容:
1.改变默认循环单元item变量名
2.改变默认循环下标index变量名

基础模板有问题可以先看上一篇

源码:

index.wxml

<view class="students">
    <view class="item">
        <text>下标text>
        <text>序号text>
        <text>姓名text>
        <text>年龄text>
        <text>性别text>
    view>
    
    <view wx:for="{{students}}" wx:key="id" wx:for-item="stu" 
    wx:for-index="idx" class="item">
        <text>{{idx}}text>
        <text>{{stu.id}}text>
        <text>{{stu.name}}text>
        <text>{{stu.age}}text>
        <text>{{stu.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:"男"}
           ]
        }
})

效果演示:

微信小程序(二十七)列表渲染改变量名_第1张图片

你可能感兴趣的:(微信小程序,微信小程序,小程序)