小程序原生-列表渲染

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>
相关推荐
毛毛三由4 小时前
【uniapp】微信小程序修改按钮样式
微信小程序·小程序·uni-app
qtkj66994 小时前
上门养老小程序源码 uniapp PHP MySQL
小程序·宠物
知识分享小能手7 小时前
微信小程序入门学习教程,从入门到精通,项目实战:美妆商城小程序 —— 知识点详解与案例代码 (18)
前端·学习·react.js·微信小程序·小程序·vue·前端技术
不太会写10 小时前
又开始了 小程序定制
vue.js·spring boot·python·小程序
说私域10 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的互联网运营体系化研究
人工智能·小程序
2501_9160074711 小时前
iOS 26 软件性能测试 新版系统下评估全流程 + 多工具辅助方案
android·macos·ios·小程序·uni-app·cocoa·iphone
00后程序员张12 小时前
Swoole HTTPS 实战,在生产环境部署、性能权衡与排查流程
后端·ios·小程序·https·uni-app·iphone·swoole
從南走到北13 小时前
智尚房产中介小程序
微信小程序·小程序
2501_9159090615 小时前
iOS App 上架全流程详解:证书配置、打包上传、审核技巧与跨平台上架工具 开心上架 实践
android·ios·小程序·https·uni-app·iphone·webview
2501_9151063216 小时前
iOS 26 系统流畅度测试实战分享,多工具组合辅助策略
android·macos·ios·小程序·uni-app·cocoa·iphone