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


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 异步调用框架 (Part 6 - 实例 &amp; 模式)
Aug 04 Javascript
javascript管中窥豹 形参与实参浅析
Dec 17 Javascript
jQuery读取和设定KindEditor值的方法
Nov 22 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
Sep 06 Javascript
jquery ajax双击div可直接修改div中的内容
Mar 04 Javascript
JavaScript html5 canvas绘制时钟效果(二)
Mar 27 Javascript
jQuery ready()和onload的加载耗时分析
Sep 08 Javascript
JavaScript易错知识点整理
Dec 05 Javascript
webpack手动配置React开发环境的步骤
Jul 02 Javascript
javascript 设计模式之组合模式原理与应用详解
Apr 08 Javascript
Vue实现开关按钮拖拽效果
Sep 22 Javascript
关于angular 8.1使用过程中的一些记录
Nov 25 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
一个好用的分页函数
2006/11/16 PHP
dedecms系统的广告设置代码 基础版本
2010/04/09 PHP
php面向对象中的魔术方法中文说明
2014/03/04 PHP
PHP中file_exists函数不支持中文名的解决方法
2014/07/26 PHP
php is_executable判断给定文件名是否可执行实例
2016/09/26 PHP
ThinkPHP 在阿里云上的nginx.config配置实例详解
2017/10/11 PHP
PHP 使用二进制保存用户状态的实例
2018/01/29 PHP
laravel-admin的图片删除实例
2019/09/30 PHP
js下用gb2312编码解码实现方法
2009/12/31 Javascript
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
JQuery解析HTML、JSON和XML实例详解
2014/03/29 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
Canvas实现动态的雪花效果
2017/02/13 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
鸿蒙系统中的 JS 开发框架
2020/09/18 Javascript
JS sort排序详细使用方法示例解析
2020/09/27 Javascript
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
python numpy 显示图像阵列的实例
2018/07/02 Python
python子线程退出及线程退出控制的代码
2019/10/16 Python
PyCharm使用之配置SSH Interpreter的方法步骤
2019/12/26 Python
英国玛莎百货澳大利亚:Marks & Spencer Australia
2019/08/30 全球购物
马智宇婚礼主持词
2014/03/22 职场文书
文明演讲稿范文
2014/05/12 职场文书
2014年党风廉政工作总结
2014/12/03 职场文书
患者身份识别制度
2015/08/06 职场文书
初中历史教学反思
2016/02/19 职场文书
《将心比心》教学反思
2016/02/23 职场文书
《飘》英文读后感五篇
2019/10/11 职场文书
八年级作文之感恩
2019/11/22 职场文书
Django中session进行权限管理的使用
2021/07/09 Python