微信小程序开发系列(二十四)·wxml语法·列表渲染·wx:for-item 和 wx:for-index

目录

1.  如果需要对默认的变量名和下标进行修改,可以使用wx:for-item 和 wx:for-index

2.  将 wx:for 用在 标签上,以渲染一个包含多个节点的结构块

方法一

方法二

3.  总结

3.1   wx:for-item 和 wx:for-index总结

3.2   总结


1.  如果需要对默认的变量名和下标进行修改,可以使用wx:for-item 和 wx:for-index

①使用 wx:for-item 可以指定数组当前元素的变量名

②使用 wx:for-index 可以指定数组当前下标的变量名

        找到profile.wxml文件,对数字和对象进行渲染:

<!-- 数组 -->
<view wx:for="{{ fruitList }}" wx:key="id">{{ item.name }}</view><!-- 对象 -->
<view wx:for="{{ obj }}" wx:key="index">{{ item }} - {{  index }}</view>

        使用wx:for-item 和 wx:for-index,两个属性需要和 wx:for 写在同一个组件上,在重命名、修改以后,需要使用最新的变量名:

<!-- 数组 -->
<view wx:for="{{ fruitList }}" wx:key="id" wx:for-item="fruitItem" wx:for-index="i">{{ fruitItem.name }}
</view><!-- 对象 -->
<view wx:for="{{ obj }}" wx:key="key" wx:for-item="value" wx:for-index="key">{{ value }} - {{  key }}
</view>

2.  将 wx:for 用在<block/> 标签上,以渲染一个包含多个节点的结构块

①<block /> 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制

②性<block /> 标签在 wxml 中可以用于组织代码结构,支持列表渲染、条件渲染等

        找到profile.js文件,对价格进行渲染:


Page({data:{numList: [1,2,3],fruitList: [{ id: 1, name: '🍎', price:66 },{ id: 2, name: '🍋', price:77 },{ id: 3, name: '🍅', price:88 }],obj:{name: 'tom',age: 10}}})

方法一

        找到profile.wxml文件,编写代码:

<view wx:for="{{ fruitList }}" wx:key="id" wx:for-item="fruitItem" wx:for-index="i"><view>姓名:{{ fruitItem.name }}</view><view>价格:{{ fruitItem.price }}</view>
</view>

方法二

        找到profile.wxml文件,编写代码:

<!-- 方法二 -->
<block wx:for="{{ fruitList }}" wx:key="id" wx:for-item="fruitItem" wx:for-index="i"><view>姓名:{{ fruitItem.name }}</view><view>价格:{{ fruitItem.price }}</view>
</block>

        block不是一个组件,只是渲染元素,也就只是包装元素,可以组织代码结构,支持列表渲染。

        block不会在页面做任何渲染,只接受控制属性。

3.  总结

3.1   wx:for-item 和 wx:for-index总结

        wx:for-item 和 wx:for-index 是小程序中用于遍历数组或对象的列表的特殊属性。

  • wx:for-item 用于指定在每次遍历中当前项的别名。
  • wx:for-index 用于指定在每次遍历中当前索引的别名。

        这两个属性通常与 wx:for 指令一起使用,在模板中实现循环渲染。

        例如,假设有一个名为 fruitList 的数组,可以使用如下代码进行遍历和渲染:

<view wx:for="{{ fruitList }}" wx:key="id" wx:for-item="fruitItem" wx:for-index="index"><text>索引:{{ index }}, 水果名称:{{ fruitItem.name }}</text>
</view>

        在每次循环中,wx:for-item="fruitItem"将当前项的值赋给 fruitItem 这个别名变量;wx:for-index="index"则将当前索引的值赋给 index 这个别名变量。通过这种方式,可以方便地在模板中使用当前项和索引的值。

        请注意, wx:key="id" 是必须的,用于唯一标识每个循环项,以提高渲染性能。

3.2   <block>总结

        在小程序中,<block> 标签通常用于包裹多个节点,起到类似于 <div> 的作用,但不会在页面中额外增加节点。如果想要在 <block> 标签上使用 wx:for 进行循环渲染,可以按照以下方式操作: 

<block wx:for="{{ fruitList }}" wx:key="id" wx:for-item="fruitItem" wx:for-index="index"><view>索引:{{ index }}, 水果名称:{{ fruitItem.name }}</view>
</block>

        在这个例子中,<block> 标签包裹了一个 <view> 标签,通过 wx:for 遍历 fruitList 数组,并将每个项赋值给 fruitItem,同时将索引赋值给 index,然后在 <view> 标签内部展示索引和水果名称。
        使用 <block> 标签可以在不增加额外节点的情况下实现对多个节点的整体控制,结合 wx:for 可以很好地实现列表数据的循环渲染。

微信小程序开发_时光の尘的博客-CSDN博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/738885.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

新品发布:广州大彩科技COF系列2.1寸480*480 IPS 串口屏发布!

一、产品介绍 该产品是一款2.1寸分辨率为 480480的医用级工业组态串口屏&#xff0c;拥有2.1寸IPS液晶屏&#xff0c;分辨率有480480&#xff08;实际显示为R240内切圆区域&#xff09;&#xff0c;支持电容触摸。采用COF超薄结构工艺设计&#xff0c;用户安装便捷灵活&#x…

力扣hot100:240.搜索二维矩阵II(脑子)

吉大21级算法分析与设计的一道大题&#xff0c;由于每一行都是排好序的直接逐行二分 可以达到&#xff1a;O(mlogn)。但是这里追求更广的思路可以使用其他方法。 矩阵四分&#xff1a; 在矩阵中用中心点比较&#xff0c;如果target大于中心点的值&#xff0c;则由于升序排列&am…

【顺序表】

//#########顺序表的定义############// 定义结构体 typedef struct {int* data; //动态//int data[sizemax]; // 静态int Maxsize; //最大容量int length; //当前长度 } sqlist;lnode* getelem(linklist l, int i) //返回一个结点 l是单链表 {int j 1;lnode* p l->…

【C++】string类(介绍、常用接口)

&#x1f308;个人主页&#xff1a;秦jh__https://blog.csdn.net/qinjh_?spm1010.2135.3001.5343&#x1f525; 系列专栏&#xff1a;http://t.csdnimg.cn/eCa5z 目录 string类的常用接口说明 string类对象的常见构造 ​编辑 string字符串的遍历&#xff08;迭代器&#xf…

Python网站的搭建和html基础

1.Python网站代码及讲解 一般我们搭建小型的网站就用flask库就行了。 &#xff08;1&#xff09;安装flask库 安装完python后&#xff0c;按住windows徽标键和r,弹出“运行”&#xff0c;在里面输入cmd。 回车打开&#xff0c;输入“pip install flask”。 &#xff08;2&am…

地平线旭日x3派部署yolov5--全流程

地平线旭日x3派部署yolov5--全流程 前言一、深度学习环境安装二、安装docker三、部署3.1、安装工具链镜像3.2、配置天工开物OpenExplorer工具包3.3、创建深度学习虚拟空间&#xff0c;安装依赖&#xff1a;3.4、下载yolov5项目源码并运行3.5、pytorch的pt模型文件转onnx3.6、最…

要先学会 “面向对象编程” 就得学会类和对象(Java篇)

本篇会加入个人的所谓‘鱼式疯言’ ❤️❤️❤️鱼式疯言:❤️❤️❤️此疯言非彼疯言 而是理解过并总结出来通俗易懂的大白话, 小编会尽可能的在每个概念后插入鱼式疯言,帮助大家理解的. &#x1f92d;&#x1f92d;&#x1f92d;可能说的不是那么严谨.但小编初心是能让更多人…

HIVE 大数据学习

参考视频 黑马程序员Hive全套教程&#xff0c;大数据Hive3.x数仓开发精讲到企业级实战应用_哔哩哔哩_bilibili 介绍 Apache Hive是一款建立在Hadoop之上的开源数据仓库系统&#xff0c;可以将存储在Hadoop文件中的结构化、半结构化数据文件映射为一张数据库表&#xff0c;基于…

ReactNative进阶(五):React Native与原生通信

文章目录 一 、前言二、RN与安卓通信2.1 RN 调用安卓原生组件2.2 RN 应用消息机制方式与安卓原生代码切换2.3 RN 应用 Promise 机制与安卓原生代码通信2.4 RN 应用 callback 回调方式与安卓原生代码通信 三、RN与IOS通信3.1 定义导出的方法名3.2 promise 实现回调函数3.3 继承 …

LeetCode hot 100 —— 哈希表 by python

什么是哈希表 散列表&#xff08;Hash table&#xff0c;也叫哈希表&#xff09;&#xff0c;是根据关键码值(Key和value)而直接进行访问的数据结构。也就是说&#xff0c;它通过把关键码值映射到表中一个位置来访问记录&#xff0c;以加快查找的速度。这个映射函数叫做散列函…

快速排序和堆排序模板总结

堆排序以及快速排序模板 堆排序使用&#xff0c;215.数组中的第k个最大元素&#xff1a;https://leetcode.cn/problems/kth-largest-element-in-an-array 快速排序使用&#xff0c; 75.颜色分类&#xff1a; https://leetcode.cn/problems/sort-colors/ 堆排序模板 public …

【AI学习指南】九、PaddlePaddle自然语言处理-PaddleNLP SKEP情感分析定制化训练(万字长文附代码)

目录 加载预训练模型到指定位置 加载分词器 准备数据集 train.tsv 文件内容示例: dev.tsv 文件

第一次Python小练习题目

1.打印某学校的校训&#xff0c;具体内容如下所示&#xff1a; ****************************** 勤奋 严谨 求实 创新 ****************************** 注意: 第一行和最后一行各有 30 个*号。 答案&#xff1a; school_strs "勤奋 严谨 求实 创新&q…

8.找到字符串中所有字母异位词

给定两个字符串 s 和 p&#xff0c;找到 s 中所有 p 的 异位词 的子串&#xff0c;返回这些子串的起始索引。不考虑答案输出的顺序。 异位词 指由相同字母重排列形成的字符串&#xff08;包括相同的字符串&#xff09;。 示例 1: 输入: s "cbaebabacd", p "…

申请选择商家转账到零钱流程怎样的

商家转账到零钱是什么&#xff1f; 【商家转账到零钱】可以说是【企业付款到零钱】的升级版&#xff0c;商家转账到零钱可以为商户提供同时向多个用户微信零钱转账的能力&#xff0c;支持分销返佣、佣金报酬、企业报销、企业补贴、服务款项、采购货款等自动向用户转账的场景。…

如何关闭微软的Edge浏览器右击提示的:“使用copilot重写“的提示?

最近在使用微软的edge浏览器写文档的时候&#xff0c;总是不小心右击鼠标&#xff0c;提示 有时候挺烦人的&#xff0c;那怎么关闭呢&#xff1f; 打开edge浏览器的设置 在设置中搜索AI&#xff0c;并关闭AI书写的选项就好了 这样就可以获得一个干净的界面了&#xff0c;不…

微信小程序重新加载当前页面、刷新当前页面

重新加载页面 使用wx.reLanuch&#xff08;&#xff09;&#xff0c;url: 路径当前页面跳转, 页面所有数据重新初始化&#xff0c;已配置的数据不会保存 wx.reLaunch({url: /pages/orders/createOrder/createOrder, // 当前页面的路径}) reLanuch()的方法&#xff0c;会有一个…

向指定接口上传文件

post请求&#xff0c;参数为接口地址&#xff0c;文件的绝对路径&#xff0c;例如&#xff1a;D:/files/a.txt&#xff0c; 返回结构如下&#xff1a; {"code": 200,"message": "成功","data": "1231312313","ok&quo…

什么是APP封装?APP封装有什么途径?APP封装如何实现?

APP封装是形成APP成本最低的一种方式。你只需要拥有一个手机端的网址就可以通过一些技术处理封装成一个跨iOS和Android的APP&#xff0c;这个过程往往只需要几分钟。既节省时间又能节省开发的成本资金&#xff0c;所以接下来就介绍一下大家都比较关心的怎么给手机网站封装打包成…

基于pytest的证券清算系统功能测试工具开发

需求 1.造测试数据&#xff1a;根据测试需要&#xff0c;自动化构造各业务场景的中登清算数据与清算所需起来数据 2.测试清算系统功能&#xff1a; 自动化测试方案 工具设计 工具框架图 工具流程图 实现技术 python, pytest, allure, 多进程&#xff0c;mysql, 前端 效果 测…