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


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 相关文章推荐
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
Dec 31 Javascript
javascript实现自动输出文本(打字特效)
Aug 27 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
Sep 01 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
Dec 09 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
Dec 14 Javascript
JavaScript笔记之数据属性和存储器属性
Mar 31 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
Oct 14 Javascript
Angularjs实现页面模板清除的方法
Jul 20 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
Jun 13 Javascript
ES6基础之 Promise 对象用法实例详解
Aug 22 Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 Javascript
bootstrap-paginator服务器端分页使用方法详解
Feb 13 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生成数组再传给js的方法
2014/08/07 PHP
php封装的mysqli类完整实例
2016/10/18 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
javascript 用原型继承来实现对象系统
2010/03/22 Javascript
可以将word转成html的js代码
2010/04/11 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
2010/10/14 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
设置jQueryUI DatePicker默认语言为中文
2016/06/04 Javascript
AngularJs $parse、$eval和$observe、$watch详解
2016/09/21 Javascript
微信小程序点击控件修改样式实例详解
2017/07/07 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
js实现倒计时秒杀效果
2020/03/25 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
微信小程序实现watch监听
2020/06/04 Javascript
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
pymssql ntext字段调用问题解决方法
2008/12/17 Python
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
浅谈python和C语言混编的几种方式(推荐)
2017/09/27 Python
django教程如何自学
2020/07/31 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
Python3中对json格式数据的分析处理
2021/01/28 Python
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
2016/07/08 HTML / CSS
解决Firefox下不支持outerHTML问题代码分享
2014/06/04 HTML / CSS
Footshop乌克兰:运动鞋的最大选择
2019/12/01 全球购物
老师给学生的表扬信
2014/01/17 职场文书
公务员综合考察材料
2014/02/01 职场文书
停水通知
2015/04/16 职场文书
2015夏季作息时间调整通知
2015/04/24 职场文书
职工食堂管理制度
2015/08/06 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
自荐信大全
2019/03/21 职场文书
MySQL主从切换的超详细步骤
2022/06/28 MySQL