微信小程序--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.练习

相关推荐
郑叔敲代码3 小时前
帝国cms 微信小程序的登录逻辑
微信小程序·小程序·notepad++
棋子一名6 小时前
跑马灯组件 Vue2/Vue3/uni-app/微信小程序
微信小程序·小程序·uni-app·vue·js
无衣 秦风7 小时前
vue3+hubuilderX开发微信小程序使用elliptic生成ECDH密钥对遇到的问题
微信小程序·小程序
游戏开发爱好者88 小时前
BShare HTTPS 集成与排查实战,从 SDK 接入到 iOS 真机调试(bshare https、签名、回调、抓包)
android·ios·小程序·https·uni-app·iphone·webview
2501_916008898 小时前
iOS 26 系统流畅度实战指南|流畅体验检测|滑动顺畅对比
android·macos·ios·小程序·uni-app·cocoa·iphone
流***陌9 小时前
陪诊就医小程序中健康档案的精细化管理设计方案
小程序
明天你好2679 小时前
如何做一个花店小程序,搭建一个小程序多少钱
微信小程序·小程序·模拟退火算法
2501_9151063210 小时前
苹果软件加固与 iOS App 混淆完整指南,IPA 文件加密、无源码混淆与代码保护实战
android·ios·小程序·https·uni-app·iphone·webview
江城开朗的豌豆10 小时前
小程序登录不迷路:一篇文章搞定用户身份验证
前端·javascript·微信小程序
2501_9159214310 小时前
iOS 26 崩溃日志解析,新版系统下崩溃获取与诊断策略
android·ios·小程序·uni-app·cocoa·iphone·策略模式