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


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 相关文章推荐
ExtJs 3.1 XmlTreeLoader Example Error
Feb 09 Javascript
js控制input输入字符解析
Dec 27 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
Apr 15 Javascript
Jquery获取当前城市的天气信息
Aug 05 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
Aug 08 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
Aug 24 Javascript
微信小程序  audio音频播放详解及实例
Nov 02 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
Dec 25 Javascript
javascript添加前置0(补零)的几种方法
Jan 05 Javascript
JS实现搜索关键词的智能提示功能
Jul 07 Javascript
基于JavaScript实现简单的轮播图
Mar 03 Javascript
JavaScript中document.activeELement焦点元素介绍
Nov 27 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简洁函数(PHP简单明了函数语法)
2012/06/10 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
PHP使用微信开发模式实现搜索已发送图文及匹配关键字回复的方法
2017/09/13 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
jQuery实现的原图对比窗帘效果
2014/06/15 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
深入理解Java线程编程中的阻塞队列容器
2015/12/07 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
nodeJS删除文件方法示例
2016/12/25 NodeJs
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
2017/04/04 jQuery
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
2017/08/16 Javascript
vue 优化CDN加速的方法示例
2018/09/19 Javascript
vue模式history下在iis中配置流程
2019/04/17 Javascript
详解微信小程序图片地扯转base64解决方案
2019/08/18 Javascript
微信小程序返回箭头跳转到指定页面实例解析
2019/10/08 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
windows系统中python使用rar命令压缩多个文件夹示例
2014/05/06 Python
Python实现感知器模型、两层神经网络
2017/12/19 Python
wtfPython—Python中一组有趣微妙的代码【收藏】
2018/08/31 Python
值得收藏,Python 开发中的高级技巧
2018/11/23 Python
解决python3 HTMLTestRunner测试报告中文乱码的问题
2018/12/17 Python
python使用zip将list转为json的方法
2018/12/31 Python
Python批量将图片灰度化的实现代码
2020/04/11 Python
优衣库美国官网:UNIQLO美国
2018/04/14 全球购物
2019年.net常见面试问题
2012/02/12 面试题
老公保证书范文
2014/04/29 职场文书
毕业证代领委托书
2014/09/26 职场文书
2014年节能降耗工作总结
2014/12/11 职场文书
高三复习计划
2015/01/19 职场文书
售后前台接待岗位职责
2015/04/03 职场文书