微信小程序 wx:for遍历循环使用实例解析

下面是关于“微信小程序 wx:for遍历循环使用实例解析”的详细攻略。

下面是关于“微信小程序 wx:for遍历循环使用实例解析”的详细攻略。

一、wx:for概述

在微信小程序中，我们经常需要在页面上展示列表数据。wx:for是一种循环渲染数据的方式，可以用来遍历一个数组，并将数组中的每个元素渲染到页面上。

二、wx:for使用方法

<view wx:for="{{array}}" wx:key="*this">{{item}}</view>

上面的代码中，array是你要遍历的数组名；item是数组中当前遍历到的元素。wx:key用于指定列表中的每个项目的唯一标识符，必须指定，如果不指定会有警告提示。

三、wx:for示例1

下面是一个简单的wx:for的示例。先展示一下数组的内容：

// js文件
Page({
  data: {
    fruits: [
      {name: '苹果', price: '2.5'},
      {name: '香蕉', price: '1.5'},
      {name: '橘子', price: '3.0'}
    ]
  }
})

在page中使用wx:for循环遍历数组，将每个元素的名称和价格都渲染到页面上：

<!-- wxml文件 -->
<view wx:for="{{fruits}}" wx:key="name">
  <text>{{item.name}}</text>
  <text>{{item.price}}元/斤</text>
</view>

上面的代码中，wx:key="name"指定了每个元素的唯一标识符为name。

四、wx:for示例2

下面是一个稍微复杂一些的wx:for的示例。首先，展示一下数组的内容：

// js文件
Page({
  data: {
    books: [
      {name: 'JavaScript高级程序设计', author: 'Nicholas C.Zakas', id: 1},
      {name: '深入浅出Node.js', author: '朴灵', id: 2},
      {name: '你不知道的JavaScript', author: 'Kyle Simpson', id: 3}
    ]
  },
  deleteBook: function(e) {
    var id = e.currentTarget.dataset.id;
    var books = this.data.books.filter(function(v) {
      return v.id != id;
    });
    this.setData({
      books: books
    });
  }
})

在页面中使用wx:for循环遍历数组，将书名、作者和删除按钮都渲染到页面上，同时给删除按钮绑定一个事件，根据书籍id从数组中删除对应的书籍：

<!-- wxml文件 -->
<view wx:for="{{books}}" wx:key="id">
  <text>书名：{{item.name}}</text>
  <text>作者：{{item.author}}</text>
  <button data-id="{{item.id}}" bindtap="deleteBook">删除</button>
</view>

上面的代码中，wx:key="id"指定了每个元素的唯一标识符为id，在绑定删除事件时，使用dataset可以获取到当前书籍的id。

以上就是关于“微信小程序 wx:for遍历循环使用实例解析”的完整攻略。