位置:电子教程 > 微信小程序入门教程 (如果看不到内容请使用360浏览器) 推荐学习资源
小程序起步
小程序基础知识
小程序基础语法
当前阅读教程:微信小程序入门教程 > for语句
阅读(22555525)      收藏       赞(5685)      分享
上一篇: if 语句 下一篇: while语句

下面我们.js文件的for语句使用传统的JavaScript语法,有别于微信小程序wxml页面中使用的for语句(见后)。

.js脚本中for语句的使用示例

小白教程网www.2d5.net

如下:

  onLoad: function (options) {
    for (var i = 0; i < 3; ++i) {
      console.log(i);
    }
  },


效果如图9-9所示


image.png


1.WXML页面中for语句的使用

在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。

默认数组当前项的下标变量名为 index,数组当前项的变量名为 item

WXML页面中可以通过for循环显示.js脚本中定义或者获取的数组数据,WXMLfor语句的使用示例

小白教程网www.2d5.net

如下:

<view wx:for="{{[1,2,3,4,5,6,7,8,9]}}"> <!—{{}}中定义了一个数组,使用for循环来显示-->
  <view>序号:{{index}} | 内容:{{item}}</view>
</view>

效果如图9-10所示

image.png


2.WXML中for语句嵌套的使用

提示:使用 wx:for-item 可以指定数组当前元素的变量名,使用 wx:for-index 可以指定数组当前下标的变量名。

九九乘法表,.wxml文件代码示例

小白教程网www.2d5.net

如下:

<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>


效果如图9-11所示

image.png




3.for循环在WXML中的使用

在小程序中对应的.js文件里面的data区块定义数组(people),然后在对应的.wxml页面使用for循环来显示。

.js脚本中数组的定义示例

小白教程网www.2d5.net

如下:

  data: {
    people: ["张三", "李四", "王五"]
  },


WXMLfor语句显示数据示例

小白教程网www.2d5.net

如下:

<view wx:for="{{people}}">
  <view>序号:{{index}} | 内容:{{item}}</view>
</view>


效果如图9-12

image.png


我们使用wx:for-itemwx:for-index修改关键字后,WXML代码示例

小白教程网www.2d5.net

如下:

<view wx:for="{{people}}" wx:for-index="id"  wx:for-item="xingming" >
  <view>序号:{{id}} | 内容:{{xingming}}</view>
</view>


       效果如图9-12所示


上一篇: if 语句 下一篇: while语句
毕业设计网             广告联系QQ:45157718(微信同号)