微信小程序 教程之列表渲染


Posted in Javascript onOctober 18, 2016

系列文章:

wx:for

在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item

<view wx:for="{{items}}">
 {{index}}: {{item.message}}
</view>
Page({
 items: [{
 message: 'foo',
 },{
 message: 'bar'
 }]
})

使用wx:for-item可以指定数组当前元素的变量名

使用wx:for-index可以指定数组当前下标的变量名:

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
 {{idx}}: {{itemName.message}}
</view>

wx:for也可以嵌套,下边是一个九九乘法表

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
 <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
 <view wx:if="{{i <= j}}">
  {{i}} * {{j}} = {{i * j}}
 </view>
 </view>
</view>

block wx:for

类似block wx:if,也可以将wx:for用在<block/>标签上,以渲染一个包含多节点的结构块。例如:

<block wx:for="{{[1, 2, 3]}}">
 <view> {{index}}: </view>
 <view> {{item}} </view>
</block>

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
Sep 19 Javascript
js apply/call/caller/callee/bind使用方法与区别分析
Oct 28 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
Nov 07 Javascript
js获取url中的参数且参数为中文时通过js解码
Mar 19 Javascript
javascript中数组的定义及使用实例
Jan 21 Javascript
JavaScript制作弹出层效果
Dec 02 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
详解如何实现一个简单的Node.js脚手架
Dec 04 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
Mar 27 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
Jun 19 Javascript
js根据后缀判断文件文件类型的代码
May 09 Javascript
js实现列表按字母排序
Aug 11 Javascript
微信小程序 教程之条件渲染
Oct 18 #Javascript
微信小程序 教程之数据绑定
Oct 18 #Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 #Javascript
微信小程序 教程之WXML
Oct 18 #Javascript
原生JS实现匀速图片轮播动画
Oct 18 #Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 #Javascript
原生js实现网易轮播图效果
Apr 10 #Javascript
You might like
在任意字符集下正常显示网页的方法一
2007/04/01 PHP
PHP获取当前文件所在目录 getcwd()函数
2009/05/13 PHP
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
PHP5函数小全(分享)
2013/06/06 PHP
详解php curl带有csrf-token验证模拟提交方法
2018/04/18 PHP
PHP7使用ODBC连接SQL Server2008 R2数据库示例【基于thinkPHP5.1框架】
2019/05/06 PHP
php判断目录存在的简单方法
2019/09/26 PHP
浅谈Laravel POST,PUT,PATCH 路由的区别
2019/10/15 PHP
js中匿名函数的N种写法
2010/09/08 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
Javascript中神奇的this
2016/01/20 Javascript
js添加事件的通用方法推荐
2016/05/15 Javascript
用JS写的一个Ajax库(实例代码)
2016/08/06 Javascript
jQuery实现右键菜单、遮罩等效果代码
2016/09/27 Javascript
微信小程序 地图map详解及简单实例
2017/01/10 Javascript
使用vue-router完成简单导航功能【推荐】
2018/06/28 Javascript
vue自动路由-单页面项目(非build时构建)
2019/04/30 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
2019/06/06 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
python对DICOM图像的读取方法详解
2017/07/17 Python
python如何为创建大量实例节省内存
2018/03/20 Python
python 用lambda函数替换for循环的方法
2018/06/09 Python
python实现逆序输出一个数字的示例讲解
2018/06/25 Python
Python全局变量与global关键字常见错误解决方案
2020/10/05 Python
详解h5页面在不同ios设备上的问题总结
2019/03/01 HTML / CSS
台湾团购、宅配和优惠券:17Life
2017/08/14 全球购物
网上签名寄语活动留言
2014/01/18 职场文书
预备党员政审材料
2014/02/04 职场文书
小学生中国梦演讲稿
2014/04/23 职场文书
植树节活动总结
2014/04/30 职场文书
白莲教口号
2014/06/18 职场文书
教室布置标语
2014/06/26 职场文书
基层干部个人对照检查及整改措施
2014/10/28 职场文书
Redis 配置文件重要属性的具体使用
2021/05/20 Redis
css filter和getUserMedia的联合使用
2022/02/24 HTML / CSS