微信小程序WXML之列表渲染
来源:互联网 发布:银行系统数据库设计 编辑:程序博客网 时间:2024/04/27 11:23
这一章节我们来学习一下我们在程序中另一个重要的语法结构循环结构,在java或C中是用for关键字的,在微信小程序中也是for关键字,但是不同的是语法结构有点不同,下面我们介绍一下。
wx:for
在组件上使用wx:for
控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为index
,数组当前项的变量名默认为item
1.test.wxml文件
<view wx:for="{{items}}"> {{index}}: {{item.
arry
}}
</view>
2.test.js文件
Page({ items: [{ arry: 'a', },{ arry: 'b' }]})
首先在test.wxml文件中wx:for后面的双重大括号中的items是一个数组,数组的元素如test.js中所见,在wx:for下面{{index}}:{{item.arry}}中index是items数组的下标,item.arry是数组中的元素也即是“a”和“b”。我们在编译器中编译后的结果如图所示:
还可以使用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>
最后希望各位客官老爷门给我一个继续写这个小程序技术贴的动力,也希望大家共同进步,帅气的客官可以扫一下下面的二维码给我捐点码字的银子,谢谢!!!
0 2
- 微信小程序WXML之列表渲染
- 微信小程序WXML之列表渲染
- 微信小程序框架wxml(二)wxml列表渲染
- 微信小程序WXML 数据绑定、列表渲染、条件渲染、模板、事件、引用用法
- 小程序WXML之条件渲染
- 微信小程序框架wxml(三)wxml条件渲染
- 小程序WXML之模板
- 小程序WXML之事件
- 小程序WXML之引用
- 微信小程序之wxml数组数据的写入方式
- 1.3.1微信小程序 WXML
- 微信小程序列表渲染开发
- 微信小程序框架wxml(一)wxml数据绑定
- 微信小程序框架wxml(四)wxml模板
- 微信小程序框架wxml(五)wxml事件
- 微信小程序框架wxml(六)wxml引用
- 小程序文档整理之 -- 列表渲染
- 小程序WXML之数据绑定
- 解码问题
- UIScrollView 基本属性 及 常用代理方法
- shell 脚本
- job_queue_processes参数讲解
- 盒子模型
- 微信小程序WXML之列表渲染
- Javadoc的写作规范
- U3D和iOS的整合问题
- BZOJ4381 POI2015 Odwiedziny
- 在Java中使用WebSocket实现网页聊天室
- cenOS 6.5 安装桌面环境GNOME
- webrtc-信令服务器搭建
- Error: couldn't connect to server 127.0.0.1:27017 src/mongo/shell/mongo.js
- iOS 多线程编程<八、NSOperation的基本使用>