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

注释很详细,直接上代码

上一篇

新增内容:
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 分钟前
二手交易 app 系统架构分析
java·python·小程序·系统架构·php
2501_915921439 小时前
移动端 WebView 视频无法播放怎么办 媒体控件错误排查与修复指南
android·ios·小程序·https·uni-app·iphone·webview
七七软件开发15 小时前
直播 app 系统架构分析
java·python·小程序·系统架构·php
Stanford_110618 小时前
关于大数据的基础知识(三)——数据安全与合规
大数据·网络·c++·物联网·学习·微信小程序·微信开放平台
weixin_1772972206921 小时前
旧物回收小程序:开启绿色生活新篇章
小程序·生活
weixin_1772972206921 小时前
短剧小程序系统开发:引领影视消费新潮流
大数据·小程序
少恭写代码1 天前
duxapp中主题系统是如何实现动态切换的
react native·小程序·移动开发·taro·duxapp
张风捷特烈1 天前
匠心千游 | 纯 AI 打造休闲小游戏
前端·微信小程序·游戏开发
说私域1 天前
基于开源AI智能客服、AI智能名片与S2B2C商城小程序的餐饮行业私域流量运营策略研究
人工智能·小程序·流量运营
2501_915909062 天前
Charles中文版使用教程 高效抓包与API调试常见问题处理
android·ios·小程序·https·uni-app·iphone·webview