小程序学习记录：显示数组内容2

最新推荐文章于 2025-07-08 11:18:17 发布

原创最新推荐文章于 2025-07-08 11:18:17 发布 · 4.3k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #数组

微信学习记录专栏收录该内容

27 篇文章

订阅专栏

本文通过一个小程序示例，展示了如何在WXML中使用wx:for进行数据循环绑定，以及如何自定义wx:for-index和wx:for-item的名称。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文在这里：https://blog.youkuaiyun.com/michael_ouyang/article/details/55049387

index.js：

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    arr: [{ text: "青青园中葵" }, {text: "朝露待日晞"}, {text: "阳春布德泽"}, {text:"万物生光辉"}]
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {

  }
})

index.wxml：

<!--index.wxml-->
<view class="container">

  <block wx:for="{{arr}}">
    <!-- <view >{{item}}</view> -->
    <view >{{index}}:{{item.text}}</view>
  </block>

</view>

对 index.wxml 略作修改，效果是一样的：

<!--index.wxml-->
<view class="container">

  <block wx:for="{{arr}}" wx:for-index="idx" wx:for-item="itname">
    <!-- <view >{{item}}</view> -->
    <view >{{idx}}:{{itname.text}}</view>
  </block>

</view>

就是说，wx:for-index 和 wx:for-item 可以修改默认名称（index，item）为其他名称。