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

注释很详细,直接上代码

上一篇

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

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

源码:

index.wxml

xml 复制代码
<view class="students">
    <view class="item">
        <text>下标</text>
        <text>序号</text>
        <text>姓名</text>
        <text>年龄</text>
        <text>性别</text>
    </view>
    <!-- 
        书接上篇,如果出现嵌套的怎么办,总不能都叫item吧
        这里阐述一下如何修改单元项的名字
        wx:for-item="新名字"

        举一反三,如何修改下标序号对象的名字
        wx:for-index="新名字"
    -->
    <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

css 复制代码
.item{
    display: flex;
    /* 水平均分 */
    justify-content:space-evenly;
}

index.js

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

效果演示:

相关推荐
拼图20912 小时前
微信小程序——配置路径别名和省略后缀
微信小程序·小程序
m0_7401904613 小时前
小程序部分pai
小程序
wocwin13 小时前
uniapp 微信小程序Vue3项目使用内置组件movable-area封装悬浮可拖拽按钮(拖拽结束时自动吸附到最近的屏幕边缘)
vue.js·微信小程序
2501_9159184116 小时前
iOS App 安全加固全流程:静态 + 动态混淆对抗逆向攻击实录
android·ios·小程序·https·uni-app·iphone·webview
2501_9159090619 小时前
iOS如何查看电池容量?理解系统限制与开发者级能耗调试方法
android·ios·小程序·https·uni-app·iphone·webview
三原1 天前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
Byte_Me1 天前
IoT 小程序:如何破解设备互联的碎片化困局?
物联网·小程序·iot
小徐_23331 天前
uni-app 弹窗总被父元素“绑架”?3招破局,H5/小程序/APP一招通杀!
前端·微信小程序·uni-app
難釋懷2 天前
微信小程序案例 - 本地生活(首页)
微信小程序·生活·notepad++
2501_915921432 天前
没有Mac如何完成iOS 上架:iOS App 上架App Store流程
android·ios·小程序·https·uni-app·iphone·webview