微信小程序--24(列表渲染)

一、wx:for

1.作用

  • 根据指定数组,循环渲染重复的组件结构

2.语法

  • <view wx:for="{{data中的数据}}">
    索引是:{{index}}, item项是:{{item}}
    </view>

  • index:表索引

  • item:表当前循环项

3.练习

二、手动指引索引和当前项的变量名(换名)

1.语句

  • wx:for-index
    指定当前循环项的索引变量名

  • wx:for-item
    指定当前项的变量名

2.练习

三、wx:key

1.作用

  • 通个Key指定渲染,提高渲染效率

2.语句

  • <view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>

3.练习

相关推荐
shadouqi19 分钟前
问题1:uniapp在pages样式穿刺没有问题,在components组件中样式穿刺小程序不起效果
小程序·uni-app
韩召华26 分钟前
uniapp实现微信小程序导航功能
微信小程序·uni-app·notepad++
learning_tom2 小时前
微信小程序中实现页面跳转的方法
notepad++
前端Hardy2 小时前
10 分钟搞定婚礼小程序?我用 DeepSeek 把同学的作业卷成了范本!
前端·javascript·微信小程序
2501_915909069 小时前
iOS电池寿命与App能耗监测实战 构建完整性能监控系统
android·ios·小程序·https·uni-app·iphone·webview
一只开心鸭!10 小时前
原生微信小程序实现语音转文字搜索---同声传译
微信小程序·小程序
weixin_lynhgworld10 小时前
旧物回收小程序:科技赋能,让旧物回收焕发生机
科技·小程序
此心光明事上练14 小时前
微信小程序组件发布为 npm 包的具体步骤
微信小程序·小程序·npm
Byte_Me1 天前
从东南亚出发:小程序容器技术如何助力 App 快速打入全球市场?
小程序
白日依山尽yy1 天前
前段面试题新版
notepad++