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

注释很详细,直接上代码

上一篇

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

效果演示:

相关推荐
知识分享小能手1 小时前
微信小程序入门学习教程,从入门到精通,微信小程序核心 API 详解与案例(13)
前端·javascript·学习·react.js·微信小程序·小程序·vue
2501_915106324 小时前
JavaScript编程工具有哪些?老前端的实用工具清单与经验分享
开发语言·前端·javascript·ios·小程序·uni-app·iphone
Terio_my5 小时前
微信小程序开发从零基础到项目发布的全流程实战教程(四)
微信小程序·小程序
2501_916013745 小时前
iOS 上架 App 全流程实战,应用打包、ipa 上传、App Store 审核与工具组合最佳实践
android·ios·小程序·https·uni-app·iphone·webview
2501_915106325 小时前
iOS 26 能耗监测全景,Adaptive Power、新电池视图
android·macos·ios·小程序·uni-app·cocoa·iphone
Stanford_11067 小时前
关于嵌入式硬件需要了解的基础知识
开发语言·c++·嵌入式硬件·微信小程序·微信公众平台·twitter·微信开放平台
明月(Alioo)7 小时前
用AI帮忙,开发刷题小程序:软考真经微信小程序API接口文档(更新版)
微信小程序·小程序
克里斯蒂亚诺更新13 小时前
微信小程序的页面生命周期 以及onShow的应用场景
微信小程序·小程序
江城开朗的豌豆15 小时前
小程序避坑指南:这些兼容性问题你遇到了几个?
前端·javascript·微信小程序
江城开朗的豌豆16 小时前
玩转小程序页面跳转:我的路由实战笔记
前端·javascript·微信小程序