当前位置：首页 > news >正文

小程序原生-列表渲染

news 2025/7/29 12:07:00

1. 列表渲染的基础用法

在这里插入图片描述

<!--渲染数组列表-->
<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>

// 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. 列表渲染的进阶使用

在这里插入图片描述


<!--渲染对象属性-->
<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>

<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>