微信小程序 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遍历循环使用实例解析”的完整攻略。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:微信小程序 wx:for遍历循环使用实例解析 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • HTML5 History API 实现无刷新跳转

    HTML5 History API 是HTML5新增的一个API,通过该API可以更好地管理浏览器的历史记录和URL,实现无刷新跳转。 下面是HTML5 History API 实现无刷新跳转的具体步骤: 步骤一:改变URL,更新浏览器历史记录 使用HTML5 History API,可以通过调用window.history.pushState()方法来改变…

    JavaScript 2023年6月11日
    00
  • js数组实现权重概率分配

    下面是我对“js数组实现权重概率分配”的完整攻略: 概述 在编写JS代码时,经常会需要进行权重概率分配,即根据给定的权重,随机分配某个值。例如,我们可能需要根据一组商品的销量,按照销量大小进行分配,让销量高的商品出现的概率更大一些,从而提高展示效果。 JS中的数组提供了一种方便的实现方法。我们可以根据权重创建一个数组,数组的每个元素代表对应权重下的值,然后随…

    JavaScript 2023年5月27日
    00
  • 关于JavaScript的Array数组方法详解

    标题:关于JavaScript的Array数组方法详解 Array.prototype JavaScript中的数组是一种非常重要的数据类型,具有独特的属性和方法。在此处,我们将给出一些有关数组的基础知识,以及一些我们经常需要使用的方法。 基础知识 创建数组 创建一个数组可以使用直接量或者Array构造函数。直接量使用方括号包围数组元素,逗号隔开。例如: l…

    JavaScript 2023年5月27日
    00
  • JavaScript实现列表分页功能特效

    下面是“JavaScript实现列表分页功能特效”的完整攻略: 一、理解列表分页功能的实现原理 在网页中使用 JavaScript 和 DOM 操作来获取并显示数据。例如使用 XMLHttpRequest 对象来获取数据,然后使用 DOM 操作将数据添加到页面中。 将获取到的数据分页处理。例如,计算需要显示的页面数,并为用户提供翻页按钮来切换不同的页面。 根…

    JavaScript 2023年6月11日
    00
  • 扒一扒JavaScript 预解释

    下面是关于 “扒一扒JavaScript 预解释” 的完整攻略: 什么是JavaScript预解释? JavaScript是一种解释型语言,它在运行前必须进行解释并执行代码,而预解释则是在JavaScript代码执行之前进行一遍解释的过程。预解释其实是JavaScript解释器在读取JavaScript代码时,先查找所有定义的变量、函数,并且把这些变量、函数…

    JavaScript 2023年5月18日
    00
  • JavaScript 类的封装操作示例详解

    JavaScript类的封装操作示例详解 类是现代 JavaScript 开发中最常见的封装形式之一,通过类的封装可以将相关代码组织在一起,实现更好的封装和抽象。本篇攻略将介绍 JavaScript 类的封装操作,并提供两个示例供参考。 定义一个类 定义一个类的基础语法与 C++、Java 等语言类似,通过 class 关键字加上类的名称定义一个类,类的主体…

    JavaScript 2023年6月10日
    00
  • 探讨:JavaScript ECAMScript5 新特性之get/set访问器

    探讨:JavaScript ECMA Script 5 新特性之 get/set 访问器 简介 ECMA-262 第五版(ECMA Script 5)是 JavaScript 编程语言的最新发布的标准,它包含了一些新的语法以及 ECMAScript 3 上的扩展。 其中一个新增的重要特性是 get 和 set 访问器,这两个方法提供了一种对象属性的访问方式,…

    JavaScript 2023年6月10日
    00
  • vue-router中hash模式与history模式的区别

    Vue-router是Vue.js官方的路由管理器,它可以轻松地为单页应用提供路由功能。在Vue-router中,路由模式分为hash模式和history模式,它们的区别如下: Hash模式 在浏览器中,hash(#)符号后面的所有字符都不会被发送到服务器,这使得单页应用成为现实。在Vue-router中,hash模式是默认的路由模式。 特点 URI的has…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部