小程序原生-列表渲染

1. 列表渲染的基础用法


html 复制代码
<!--渲染数组列表-->
<view wx:for="{{numList}}" wx:key="*this" > 序号:{{index}} - 元素:{{item}}</view>
<!--渲染对象属性-->
<view wx:for="{{userInfo}}" wx:key="*this"> 序号:{{index}} - 元素:{{item}}</view>

<view wx:for="{{fruitList}}" wx:key="id" > 序号:{{index}} - 元素:{{item.name}}</view>
javascript 复制代码
// pages/test/test.js
Page({
  data: {
   numList:[1,2,3],
   fruitList:[
     {id:1,name:'苹果'},
     {id:2,name:'柠檬'},
     {id:3,name:'香蕉'},
   ],
   userInfo:{
     name: 'xiaoming',
     age:21
   }
  },
})

2. 列表渲染的进阶使用

javascript 复制代码
<!--渲染对象属性-->
<view wx:for="{{userInfo}}" wx:key="index" wx:for-item="value" wx:for-index="key" > 
序号:{{key}} - 元素:{{value}} 
</view>

<view wx:for="{{fruitList}}" wx:key="id"  wx:for-item="fruit" wx:for-index="i"> 
序号:{{i}} - 元素:{{fruit.name}}
</view>
javascript 复制代码
<view wx:for="{{fruitList}}" wx:key="id"  wx:for-item="fruit" wx:for-index="i"> 
<view>{{fruit.name}}</view>
</view>
<block wx:for="{{fruitList}}" wx:key="id"  wx:for-item="fruit" wx:for-index="i"> 
<view>{{fruit.name}}</view>
</block>
相关推荐
2501_915918415 小时前
uni-app 项目 iOS 上架踩坑经验总结 从证书到审核的避坑指南
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者85 小时前
iOS 上架 uni-app 流程全解析,从打包到发布的完整实践
android·ios·小程序·https·uni-app·iphone·webview
说私域6 小时前
“互联网 +”时代商业生态变革:以开源 AI 智能名片链动 2+1 模式 S2B2C 商城小程序为例
人工智能·小程序·开源
低代码布道师12 小时前
少儿舞蹈小程序(7)打造您的“活”名片:动态展示机构实力
低代码·小程序
程序员陆通16 小时前
用 Cursor AI 快速开发你的第一个编程小程序
人工智能·小程序
鹧鸪云光伏与储能软件开发16 小时前
投资储能项目能赚多少钱?小程序帮你测算
运维·数据库·小程序·光伏·光伏设计软件·光伏设计
微三云-轩16 小时前
小程序:12亿用户的入口,企业数字化的先锋军
大数据·小程序·开源软件
低代码布道师16 小时前
少儿舞蹈小程序(8)校区信息后台搭建
低代码·小程序
2501_9160088916 小时前
iOS 抓包工具有哪些?全面盘点主流工具与功能对比分析
android·ios·小程序·https·uni-app·iphone·webview
2501_9159214316 小时前
iOS混淆工具实战 视频流媒体类 App 的版权与播放安全保护
android·ios·小程序·https·uni-app·iphone·webview