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


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 相关文章推荐
javascript学习笔记(七)利用javascript来创建和存储cookie
Apr 08 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
May 12 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
Sep 05 Javascript
浅谈javascript中关于日期和时间的基础知识
Jul 13 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
AngularJS实现表格的增删改查(仅限前端)
Jul 04 Javascript
vue基于mint-ui的城市选择3级联动的示例
Oct 25 Javascript
JavaScript实现的简单加密解密操作示例
Jun 01 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
Aug 09 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
Dec 16 Javascript
详解Vue源码学习之双向绑定
Apr 10 Javascript
nginx部署多个vue项目的方法示例
Sep 06 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
网站加速 PHP 缓冲的免费实现方法
2006/10/09 PHP
php计算当前程序执行时间示例
2014/04/24 PHP
php判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
PHP使用mysql_fetch_row查询获得数据行列表的方法
2015/03/18 PHP
php 的反射详解及示例代码
2016/08/25 PHP
PHP基于mssql扩展远程连接MSSQL的简单实现方法
2016/10/08 PHP
PHP中Laravel 关联查询返回错误id的解决方法
2017/04/01 PHP
js 单引号 传递方法
2009/06/22 Javascript
jquery form 加载数据示例
2014/04/21 Javascript
JavaScript检测鼠标移动方向的方法
2015/05/22 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
2015/09/19 Javascript
js实现遍历含有input的table实例
2015/12/07 Javascript
AngularJs基本特性解析(一)
2016/07/21 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
2017/09/21 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
用图片替换checkbox原始样式并实现同样的功能
2018/11/15 Javascript
微信上传视频文件提示(推荐)
2018/11/22 Javascript
vue中 this.$set的用法详解
2019/09/06 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
2020/04/07 Javascript
[02:35]DOTA2英雄基础教程 狙击手
2014/01/14 DOTA
[57:47]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python实现的系统实用log类实例
2015/06/30 Python
Python实现在线音乐播放器
2017/03/03 Python
selenium+python自动化测试之环境搭建
2019/01/23 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
使用 Python 写一个简易的抽奖程序
2019/12/08 Python
个人简历自荐信
2013/12/05 职场文书
教师评优事迹材料
2014/01/10 职场文书
采购部部长岗位职责
2014/02/06 职场文书
路政管理毕业自荐书范文
2014/02/10 职场文书
三严三实学习心得体会
2014/10/13 职场文书
简单的辞职信怎么写
2015/02/28 职场文书
2015年销售助理工作总结
2015/05/11 职场文书
医院中层管理人员培训心得体会
2016/01/11 职场文书
浅谈:电影《孔子》观后感(范文)
2019/10/14 职场文书