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


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 相关文章推荐
图片动画横条广告带上下滚动的JS代码
Oct 25 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
Aug 23 Javascript
详解Javascript中prototype属性(推荐)
Sep 03 Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 Javascript
vue 微信授权登录解决方案
Apr 10 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
Aug 22 Javascript
微信小程序新手教程之启动页的重要性
Mar 03 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
Nov 09 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 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
无刷新动态加载数据 滚动条加载适合评论等页面
2013/10/16 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
PHP命名空间与自动加载类详解
2018/09/04 PHP
Aster vs KG BO3 第二场2.18
2021/03/10 DOTA
js带按钮的提示框可供选择示例代码
2013/09/17 Javascript
jQuery操作select下拉框的text值和value值的方法
2014/05/31 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
javascript如何实现暂停功能
2015/11/06 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
js实现无缝循环滚动
2020/06/23 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
js截取字符串功能的实现方法
2017/09/27 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
2018/02/10 Javascript
js原生map实现的方法总结
2020/01/19 Javascript
微信小程序用canvas画图并分享
2020/03/09 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
Python的Django框架中模板碎片缓存简介
2015/07/24 Python
在PyCharm下打包*.py程序成.exe的方法
2018/11/29 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
PyTorch中反卷积的用法详解
2019/12/30 Python
关于css兼容性问题及一些常见问题汇总
2016/05/03 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
STUBHUB日本:购买和出售全球活动门票
2018/07/01 全球购物
学生自我鉴定
2013/12/18 职场文书
教师绩效考核方案
2014/01/21 职场文书
秋季运动会通讯稿
2014/01/24 职场文书
会议活动邀请函
2014/01/27 职场文书
《四季》教学反思
2014/04/08 职场文书
电子商务系毕业生自荐信
2014/05/29 职场文书
幼儿园2014年度工作总结
2014/11/10 职场文书
小学英语教学反思范文
2016/02/15 职场文书
2016学雷锋优秀志愿者事迹材料
2016/02/25 职场文书
带你了解CSS基础知识,样式
2021/07/21 HTML / CSS
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS