【微信小程序/实现】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"}
    ]
  },
})

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


<view wx:for="{{theList}}">
  <image src="{{item.src}}">image>
  <text>{{item.text}}text>
view>

你可能感兴趣的:(微信小程序,微信小程序,前端,小程序)