请选择 进入手机版 | 继续访问电脑版

微信小程序教程网

新浪微博达人勋

1202

积分

324

金钱

0

广播

Rank: 6Rank: 6

积分
1202

社区QQ达人最佳新人活跃会员热心会员推广达人

发表于 2017-12-27 14:00:12 | 显示全部楼层 |阅读模式
分享到:
1,wx:for

在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item 事例如下:

wxml文件:

  1. <view wx:for="{{items}}">
  2. {{index}}: {{item:one}}
  3. </view>
  4. js文件:
  5. Page({
  6. items:[{
  7. one: "test1",
  8. },{
  9. one: "test2"
  10. }]
  11. })
复制代码

可以使用wx:for-item指定数组当前元素的变量名

可以使用wx:for-index指定数组当前下标的变量名,事例如下:

wxml文件:

  1. <view wx:for="{{items}}" wx:for-item="name" wx:for-index="id">
  2. {{id}}: {{name.one}}
  3. </view>
  4.   
  5. 下面是一个九九乘法表事例:
  6. <view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i">
  7. <view
  8. wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j">
  9. <view
  10. wx:if="{{i <= j}}">
  11. {{i}}*{{j}} = {{i * j}}
  12. </view>
  13. </view>
  14. </view>
复制代码

2,block wx:for

wx:for用在<blcok/>标签上,以渲染一个包含多节点的结构块。例如:

  1. <block wx:for="{{[1,2,3]}}">
  2. <view> {{index}}: </view>
  3. <view> {{item}} </view>
  4. </block>
复制代码

效果图如下:





本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册 新浪微博登陆

x

新浪微博达人勋

117

积分

0

金钱

0

广播

Rank: 2

积分
117
发表于 2017-12-27 14:00:45 | 显示全部楼层
楼下的接上

新浪微博达人勋

615

积分

4

金钱

0

广播

Rank: 4

积分
615
发表于 2018-1-4 23:16:20 | 显示全部楼层
纯粹路过,没任何兴趣,仅仅是看在老用户份上回复一下

新浪微博达人勋

1147

积分

275

金钱

0

广播

Rank: 6Rank: 6

积分
1147

社区QQ达人最佳新人

发表于 2018-2-18 18:49:52 | 显示全部楼层
LZ帖子不给力,勉强给回复下吧

新浪微博达人勋

70

积分

0

金钱

0

广播

Rank: 2

积分
70
发表于 2018-3-24 03:34:14 | 显示全部楼层
一直在看

新浪微博达人勋

115

积分

5

金钱

0

广播

Rank: 2

积分
115
发表于 2018-8-9 15:06:07 | 显示全部楼层
前排支持下

新浪微博达人勋

134

积分

7

金钱

0

广播

Rank: 2

积分
134
发表于 2018-11-12 22:38:43 | 显示全部楼层
为保住菊花,这个一定得回复!

新浪微博达人勋

578

积分

0

金钱

0

广播

Rank: 4

积分
578
发表于 2019-1-28 23:33:47 | 显示全部楼层
锄禾日当午,发帖真辛苦。谁知坛中餐,帖帖皆辛苦!

新浪微博达人勋

106

积分

0

金钱

0

广播

Rank: 2

积分
106
发表于 2019-3-12 23:10:28 | 显示全部楼层
我也是坐沙发的

新浪微博达人勋

69

积分

0

金钱

0

广播

Rank: 2

积分
69
发表于 2019-3-31 13:27:53 | 显示全部楼层
大人,此事必有蹊跷!
您需要登录后才可以回帖 登录 | 立即注册 新浪微博登陆

本版积分规则

小黑屋|手机版|Archiver|小程序教程网. ( 粤ICP备12089784号 )

GMT+8, 2019-12-16 12:39 , Processed in 0.281250 second(s), 42 queries .

Powered by Discuz X3.1

© 2001-2013 IOS教程网

快速回复 返回顶部 返回列表