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


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 相关文章推荐
JQuery打造PHP的AJAX表单提交实例
Nov 03 Javascript
JS获取浏览器版本及名称实现函数
Apr 02 Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 Javascript
jquery仿QQ登录账号选择下拉框效果
Mar 22 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
Dec 19 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
Jan 08 Javascript
vue使用stompjs实现mqtt消息推送通知
Jun 22 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
Sep 19 Javascript
angularjs结合html5实现拖拽功能
Jun 25 Javascript
微信小程序后端实现授权登录
Feb 24 Javascript
基于javascript处理nginx请求过程详解
Jul 07 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
冰滴咖啡制作步骤
2021/03/03 冲泡冲煮
PHP中显示格式化的用户输入
2006/10/09 PHP
PHP 高级课程笔记 面向对象
2009/06/21 PHP
linux命令之调试工具strace的深入分析
2013/06/03 PHP
php调用shell的方法
2014/11/05 PHP
前端必学之PHP语法基础
2016/01/01 PHP
使用symfony命令创建项目的方法
2016/03/17 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
通过代码实例解析PHP session工作原理
2020/12/11 PHP
监控 url fragment变化的js代码
2010/04/19 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
2013/04/16 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
2014/02/21 Javascript
javascript中mouseover、mouseout使用详解
2015/07/19 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
Angular2监听页面大小变化的解决方法
2017/10/09 Javascript
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
Vue 路由 过渡动效 数据获取方法
2018/07/31 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
vue实现文件上传读取及下载功能
2020/11/17 Javascript
python多线程threading.Lock锁用法实例
2014/11/01 Python
Python中对列表排序实例
2015/01/04 Python
Python中isnumeric()方法的使用简介
2015/05/19 Python
python+selenium打印当前页面的titl和url方法
2018/06/22 Python
十个Python练手的实战项目,学会这些Python就基本没问题了(推荐)
2019/04/26 Python
django中瀑布流写法实例代码
2019/10/14 Python
Python实现打印实心和空心菱形
2019/11/23 Python
Python 音频生成器的实现示例
2019/12/24 Python
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
生物学学生自我评价
2014/01/17 职场文书
元旦活动感言
2014/03/08 职场文书
民族团结好少年事迹材料
2014/08/19 职场文书
2015年幼师工作总结
2015/04/28 职场文书
员工表扬信怎么写
2015/05/05 职场文书
2016国庆节67周年红领巾广播稿
2015/12/18 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书
CSS中实现动画效果-附案例
2022/02/28 HTML / CSS