个人技术集锦

全部栏目

首页操作系统后端开发数据库前端开发移动端开发

您的当前位置：首页正文

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

2024-11-29 来源：个人技术集锦

目的

将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代码，花括号里的是全局变量

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

显示全文