小程序原生-列表渲染

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>
相关推荐
说私域5 小时前
私域整体结构的顶层设计:基于“开源AI智能名片链动2+1模式S2B2C商城小程序”的体系重构
人工智能·小程序·开源
2501_915106326 小时前
CDN 可以实现 HTTPS 吗?实战要点、部署模式与真机验证流程
网络协议·http·ios·小程序·https·uni-app·iphone
云起SAAS1 天前
SCL-90症状自评量表抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·scl-90症状自评量表·scl-90
LoveEate1 天前
uniapp 运行/发版微信小程序
微信小程序·小程序·uni-app
韩立学长1 天前
【开题答辩实录分享】以《基于微信小程序的糖尿病居家健康管理系统》为例进行答辩实录分享
微信小程序·小程序
杏花春雨江南2 天前
小程序的页面宽度 设置多少合适??
小程序
fakaifa2 天前
【高级版】沃德政务招商系统源码+uniapp小程序
小程序·uni-app·源码下载·沃德政务招商系统·招商系统源码
云起SAAS2 天前
族谱家谱抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·族谱家谱
明月(Alioo)2 天前
用AI帮忙,开发刷题小程序:微信小程序在线答题系统架构解析
微信小程序·小程序·系统架构
知识分享小能手2 天前
微信小程序入门学习教程,从入门到精通,WXS语法详解(10)
前端·javascript·学习·微信小程序·小程序·vue·团队开发