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

注释很详细,直接上代码

上一篇

新增内容:
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:"男"}
           ]
        }
})

效果演示:

相关推荐
兰亭妙微7 小时前
从线到机:AI 与多模态交互如何重塑 B 端与 App 界面设计
人工智能·小程序·交互·用户体验设计公司
青青子衿越7 小时前
微信小程序web-view嵌套H5,小程序与H5通信
前端·微信小程序·小程序
乔公子搬砖8 小时前
小程序开发提效:npm支持、Vant Weapp组件库与API Promise化(八)
前端·javascript·微信小程序·js·promise·vagrant·事件绑定
!win !13 小时前
uni-app支付宝端彻底禁掉下拉刷新效果
前端·小程序·uni-app
软希网分享源码18 小时前
校园跑腿小程序源码 | 跑腿便利店小程序(源码下载)
小程序·跑腿便利店小程序·校园跑腿小程序源码
说私域1 天前
基于开源 AI 智能名片链动 2+1 模式 S2B2C 商城小程序的新开非连锁品牌店开业引流策略研究
人工智能·小程序·开源
KlDMEO1 天前
DrissionPage 能控制火狐或edge吗
其他·微信小程序·小程序
柯北(jvxiao)1 天前
爆肝三周,我终于上线了自己的第一个小程序
微信小程序·小程序
lumi.1 天前
2.3零基础玩转uni-app轮播图:从入门到精通 (咸虾米总结)
java·开发语言·前端·vue.js·微信小程序·uni-app·vue
weixin_177297220691 天前
剧本杀APP系统开发:打造多元化娱乐生态的先锋力量
小程序·娱乐·剧本杀