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

1.数组的定义和使用

在小程序中对应的.js文件里面的data区块定义数组,然后在对应的.wxml页面使用数组,使用数组我们这里利用for循环语句来循环显示数组的内容。

.js文件中数组的定义示例

小白教程网www.2d5.net

如下:

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

.wxml文件中显示数组的代码示例

小白教程网www.2d5.net

如下:


<!--基本使用-->
<view>{{people[0]}}</view>
 
<!--数组的长度-->
<view>{{people.length}}</view>
 
<!--循环显示数组-->
<view wx:for="{{people}}">
  {{index}}{{item}}
</view>
 
<!--循环显示数组2-->
<view wx:for="{{people}}" wx:for-index="id"  wx:for-item="xingming" >
  <view>序号:{{id}} | 内容:{{xingming}}</view>
</view>


效果如图9-5所示

image.png



2.单字段对象数组的定义和使用

在小程序中对应的.js文件里面的data区块定义对象数组,然后在对应的.wxml页面使用for循环语句来显示数组内的内容。这里的对象数组是指的数组里面的每个成员是对象。

.js文件中数据的定义示例

小白教程网www.2d5.net

如下:


data: {
    shuzu:
      [
        { shuiguo: "苹果" },
        { shuiguo: "香蕉" },
        { shuiguo: "西瓜" },
        { shuiguo: "琵琶" }
      ],
},


.wxml文件中数据的显示如下:

<view wx:for="{{shuzu}}">
  {{index}}:{{item.shuiguo}}
</view>


效果如图9-6所示

image.png



3.多字段对象数组的定义和使用

.js文件中数据的定义示例

小白教程网www.2d5.net

如下:

data: {
    shuzu2:
      [
        {
          "id": 1,
          "title": "2018年企业最新代理政策!"
        },
        {
          "id": 2,
          "title": "2018年劳动节放假时间和安排通知"
        },
        {
          "id": 3,
          "title": "帮助你在云平台上搭建自己的"
        },
        {
          "id": 4,
          "title": "关注我们的最新企业微信号"
        },
        {
          "id": 5,
          "title": "帮助你在云平台上搭建自己"
        }
      ]  
  },


.wxml文件中数据的显示如下:

<view wx:for="{{shuzu2}}">
  {{index}}:{{item.title}}
</view>


效果如图9-7所示

image.png

上一篇: 对象 下一篇: 逻辑语句
计算机毕业设计作品网      毕业设计文档网      小程序教程网       毕业设计资料网  |         毕业设计定制QQ:45157718(微信同号)(备注:毕设)