【微信小程序/实现】wx:for实现数组循环插入数据，显示到页面中_微信小程序 列表wx:for

目的

将js文件中从服务器中获取的数据，在wxml的文件中以数组循环的形式插入展示到前端页面。

通俗点的解释就是通过wx:for循环一个数组，实现小程序wxml文件内的标签循环，插入数组的数据到循环的标签中。

实现

js代码，要有相关数组数据

// js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    theList: [
      {text: "爱情神话",src:"/image/new1.jpg"},
      {text: "记忆 Memoria",src:"/image/new2.jpg"},
      {text: "世界上最糟糕的人",src:"/image/new3.jpg"},
      {text: "希尔达与山丘之王",src:"/image/new4.jpg"},
      {text: "呼朋引伴",src:"/image/new5.jpg"},
      {text: "此时此爱 Ensilumi",src:"/image/new6.jpg"}
    ]
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

wxml代码，花括号里的是全局变量

<!-- wxml -->
<view wx:for="{{theList}}">
  <image src="{{item.src}}"></image>
  <text>{{item.text}}</text>
</view>
1
2
3
4
5