小程序原生-列表渲染

news2024/12/25 14:08:47

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>