发布于 2017-07-17 16:47:45 | 29 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的微信小程序入门,程序狗速度看过来!

小程序 微信小程序

微信小程序(weixinxiaochengxu),简称小程序,缩写XCX,英文名mini program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。


这篇文章主要介绍了微信小程序 for 循环详解的相关资料,需要的朋友可以参考下

1,wx:for

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

wxml文件:


<view wx:for="{{items}}">
{{index}}: {{item:one}}
</view>
js文件:
Page({
items:[{
one: "test1",
},{
one: "test2"
}]
})

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

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

wxml文件:


<view wx:for="{{items}}" wx:for-item="name" wx:for-index="id">
{{id}}: {{name.one}}
</view>

下面是一个九九乘法表事例:
<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>

2,block  wx:for

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


<block wx:for="{{[1,2,3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>

效果图如下:

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!



相关阅读 :
微信小程序 for 循环详解
微信小程序 template模板详解及实例代码
微信小程序 template模板详解及实例
微信小程序 登录实例详解
微信小程序 switch组件详解及简单实例
微信小程序 textarea 组件详解及简单实例
微信小程序 picker 组件详解及简单实例
微信小程序 label 组件详解及简单实例
微信小程序 form组件详解及简单实例
微信小程序 checkbox组件详解及简单实例
微信小程序 Button 组件详解及简单实例
微信小程序 地图map详解及简单实例
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务