微信小程序:两层循环的练习,两层循环显示循环图片大图(大图显示、多层循环)

效果

代码分析

外层循环

外层循环的框架

<view wx:for="{{info}}" wx:key="index"></view>

  • wx:for="{{info}}":这里wx:for指令用于指定要遍历的数据源,即info数组。当遍历开始时,会依次将数组中的每个元素赋值给子项进行展示。

  • wx:key="index":在循环过程中,需要为每个子项指定一个唯一的标识,以便更高效地更新和渲染。这里,我们使用了index作为索引来标识子项。

子项引用

<view class="right">

        {{item.name}}

</view>

  • 引用子项通过item来进行,在没通过wx:for-item自定义子项名称时,子项默认为item

扩展自定义子项名称wx:for-item,自定义索引名称wx:for-index(详见内层循环)

<view wx:for="{{info}}" wx:for-item="customItem" wx:key="index" wx:for-index="customIndex" class="item">

        <text>{{customItem}}</text> <!-- 使用自定义子项名称 -->

        <text>{{customIndex}}</text> <!-- 引用索引 -->

</view>

内层循环

外层循环的框架

内层循环中,循环的数据是外层循环的子项{{item.photo}},这里就需要设置子项名称和索引了,就不能使用默认的item和index了

<view wx:for="{{item.photo}}"  wx:key="photoIndex"  wx:for-item="photo" wx:for-index="photoIndex"></view> 

  • wx:for="{{item.photo}}":这里使用了wx:for指令来遍历名为item.photo的数组。每次循环时,将数组中的一个元素赋值给名为photo的自定义子项。
  • wx:key="photoIndex":使用wx:key指令来指定循环中每个子项的唯一标识符为photoIndex,通常会使用一个具有唯一性的属性值作为标识符。
  • wx:for-item="photo":使用wx:for-item指令来指定自定义子项的名称为photo,这样在循环内部就可以通过{{photo}}来引用每个子项的值。
  • wx:for-index="photoIndex":使用wx:for-index指令来指定循环中的索引变量名称为photoIndex,这样在循环内部就可以通过{{photoIndex}}来引用当前子项的索引值。

内层循环的子项引用

<image src="{{photo}}" data-card-index="{{index}}" data-index="{{photoIndex}}" bindtap="bindClickImg"></image>

  • <image>标签:在循环内部,使用<image>标签来显示图片。
  • src="{{photo}}"绑定了photo变量作为图片的路径。
  • data-card-index="{{index}}"为图片元素设置了外层循环的索引index
  • data-index="{{photoIndex}}"为图片元素设置了内层循环的索引photoIndex
  • bindtap="bindClickImg"表示点击图片时触发名为bindClickImg的事件处理函数。

显示大图

点击实现方法框架

bindClickImg(event) { },

  • 通过点击事件,获取wxml中传入的参数 data-card-index="{{index}}" data-index="{{photoIndex}}"(内外层的索引)

注:前面的data-前缀定义自定义数据属性时,属性名会被转换为驼峰命名法,即将连字符后的第一个字母大写。所以在事件处理函数中,data-card-index被转换为了cardIndex

 获取点击时间携带的参数

const cardIndex = event.currentTarget.dataset.cardIndex;//外层循环的索引

const photoIndex = event.currentTarget.dataset.index;//内层循环的索引

根据外层循环与外层循环的索引找到点开图片的路径

const photo = this.data.info[cardIndex].photo[photoIndex]; // 获取点击的图片路径

根据外层循环找到该外层的全部图片数组,便于大图的翻页功能(显示一组图片) 

const photos = this.data.info[cardIndex].photo; // 获取当前卡片中的所有图片链接

使用wx.previewImage方法实现显示大图的功能

wx.previewImage({

      current: photo, // 当前显示图片的链接

      urls: photos // 需要预览的图片链接列表

});

完整代码

wxml

<view class="allstyle"><view class="center"><view wx:for="{{info}}" wx:key="index" class="item"><view class="line"><view class="left">姓名</view><view class="right">{{item.name}}</view></view><view class="line"><view class="left">ID</view><view class="right">{{item.id}}</view></view><view class="line"><view class="left">年龄</view><view class="right">{{item.age}}</view></view><view class="line"><view class="width_set"><view class="photo_title">照片</view><view class="photo"><view wx:for="{{item.photo}}"  wx:key="photoIndex"  wx:for-item="photo" wx:for-index="photoIndex" class="image_wrapper"><image src="{{photo}}" data-card-index="{{index}}" data-index="{{photoIndex}}" bindtap="bindClickImg"></image></view> </view></view></view></view></view>
</view>

wxss

page{background-color:rgb(214, 214, 214);
}
/* 整体样式,让item居中显示*/
.allstyle{width:100%;display: flex;align-items: center;justify-content: center;
}
/* 设置宽度 */
.center{width:90%;
}
/* 设置每个item样式 */
.item{padding:2% 5%;margin:2% 0;background-color:#fff;
}
/* 设置行信息 */
.line{display:flex;  margin:2% 0;
}
.left{width:50%;
}
.right{color:#808080;width:50%;text-align:right;
}
.width_set{width:100%;
}
/* 图片样式 */
.photo{display: flex;flex-wrap: wrap; width:100%;margin-top:2%;
}
.image_wrapper{width: calc(33.33% - 12px);margin:0 10px 10px 0;border:1px solid black;display: flex;align-items: center;justify-content: center;
}
image{width:150rpx;height:150rpx;
}

js

Page({data: {info: [{id: 1,name: '张三',age: 12,photo: ["这里写自己的图片路径1","这里写自己的图片路径2","这里写自己的图片路径3","这里写自己的图片路径4"]},{ id: 2,name: '李四',age: 24,photo: ["这里写自己的图片路径1","这里写自己的图片路径2","这里写自己的图片路径3"]},]},// 点击图片显示大图bindClickImg(event) {const cardIndex = event.currentTarget.dataset.cardIndex;const photoIndex = event.currentTarget.dataset.index;console.log(cardIndex)console.log(photoIndex)const photo = this.data.info[cardIndex].photo[photoIndex]; // 获取点击的图片路径const photos = this.data.info[cardIndex].photo; // 获取当前卡片中的所有图片链接// 在这里实现展示大图的逻辑,比如使用 wx.previewImage 方法wx.previewImage({current: photo, // 当前显示图片的链接urls: photos // 需要预览的图片链接列表});},
})

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

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

相关文章

Mac 上安装 Emscripten

背景&#xff1a;Web 端需要使用已有的 C 库&#xff0c;需要将 C 项目编译成 WebAssembly(.wasm) 供 js 调用。 Emscripten 可以将 C 编译成 .wasm 一、下载源码 # 下载 emsdk 源码 git clone https://github.com/emscripten-core/emsdk.git# 下载完成后进入到 emsdk 项目根…

GZ035 5G组网与运维赛题第9套

2023年全国职业院校技能大赛 GZ035 5G组网与运维赛项&#xff08;高职组&#xff09; 赛题第9套 一、竞赛须知 1.竞赛内容分布 竞赛模块1--5G公共网络规划部署与开通&#xff08;35分&#xff09; 子任务1&#xff1a;5G公共网络部署与调试&#xff08;15分&#xff09; 子…

汽车EDI:福特Ford EDI项目案例

项目背景 福特&#xff08;Ford&#xff09;是世界著名的汽车品牌&#xff0c;为美国福特汽车公司&#xff08;Ford Motor Company&#xff09;旗下的众多品牌之一。此前的文章福特FORD EDI需求分析中&#xff0c;我们已经了解了福特Ford EDI 的大致需求&#xff0c;本文将会介…

C++核心编程---友元

目录 友元 友元的关键字 friend 友元的三种实现方式 1. 全局函数做友元 2. 类做友元 3. 成员函数做友元 友元 生活中你的家有客厅(Public)&#xff0c;有你的卧室(Private) 客厅所有来的客人都可以进去&#xff0c;但是你的卧室是私有的&#xff0c;也就是说只有你能进…

修复国产电脑麒麟系统开机出现initramfs 问题

目录预览 一、问题描述二、原因分析三、解决方案四、知识点呀initramfsBusyBox 五、参考链接 一、问题描述 国产麒麟系统出现 initramfs 模式 二、原因分析 一般在拷贝卡顿过程【强制关机】或者电【脑异常断电】的情况下概率性导致系统分区损坏&#xff0c;重启后大概率就会进…

⾯向对象编程:封装数据和⾏为、定义交互协议、扩展与复⽤ - GO语言从入门到实战

⾯向对象编程&#xff1a;封装数据和⾏为、定义交互协议、扩展与复⽤ - GO语言从入门到实战 一、封装数据和⾏为 结构体定义 定义了一个名为Structural的结构体。结构体是一种用户自定义的数据类型&#xff0c;可以包含不同类型的字段&#xff08;成员变量&#xff09;。 与…

150行代码实现一个极简的Canvas多功能画板

目录 1.前言2.多功能画板的实现2.1 画板初始化2.2 画笔2.3 橡皮擦2.4 清屏2.5 前进和后退 3.小结 1.前言 HTML5提供的Canvas标签能实现很多有趣的效果&#xff0c;本文就来分享一下如何使用Canvas来实现一个极简的多功能画板。先来看效果&#xff1a; 主要实现以下功能&…

深度学习之基于Pytorch卷积神经网络的图像分类系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介二、功能三、图像分类系统四. 总结 一项目简介 基于PyTorch卷积神经网络的图像分类系统是一种应用深度学习技术来实现图像分类任务的系统。本摘要将对该系统…

Qt QWidget、QDialog、QMainWindow的区别

QWidget QWidget是Qt框架中最基础的窗口类&#xff0c;可以理解为用户界面的最基本单元。QWidget类提供了一个空白窗口&#xff0c;可以通过继承该类来创建自定义的窗口类。QWidget类提供了基本的窗口属性和方法&#xff0c;如大小、位置、标题、图标等。 QDialog QDialog是…

多路IO—POll函数,epoll服务器开发流程

引言 "在计算机网络编程中&#xff0c;多路IO技术是非常常见的一种技术。其中&#xff0c;Poll函数和Epoll函数是最为常用的两种多路IO技术。这两种技术可以帮助服务器端处理多个客户端的并发请求&#xff0c;提高了服务器的性能。本文将介绍Poll和Epoll函数的使用方法&am…

TiDB x 北京银行丨新一代分布式数据库的探索与实践

导读 随着业务规模的扩大&#xff0c;传统数据库面临诸多限制&#xff0c;分布式数据库成为解决之道。本文 介绍了北京银行在数字化转型过程中对分布式数据库技术的探索&#xff0c;分享了 TiDB 在北京银行的应用历程和未来展望 。 本文根据北京银行软件开发中心罗水华先生在…

VS2019 C# mysql数据库使用EF

mysql 安装mysql-8.0.18-winx64 mysql-connector-net-8.0.18.msi mysql数据库.net开发驱动&#xff0c; 要在工程中引入connector安装后目录中的mysql.data.dll;如果直接在nutget中下载mysql.data.dll&#xff0c;那么就不用下载.net开发驱动包 mysql-for-visualstudio-1.…

设计模式_状态模式

状态模式 介绍 设计模式定义案例问题堆积在哪里解决办法状态模式一个对象 状态可以发生改变 不同的状态又有不同的行为逻辑游戏角色 加载不同的技能 每个技能有不同的&#xff1a;攻击逻辑 攻击范围 动作等等1 状态很多 2 每个状态有自己的属性和逻辑每种状态单独写一个类 角色…

Spring底层原理(四)

Spring底层原理(四) 本章内容 模拟实现Spring中的几个常见BeanFactory后置处理器 常见的BeanFactory后置处理器 GenericApplicationContext context new GenericApplicationContext(); context.registerBean("config",Config.class); context.registerBean(Conf…

YOLOv7优化:独家创新(Partial_C_Detect)检测头结构创新,实现涨点 | 检测头新颖创新系列

💡💡💡本文独家改进:独家创新(Partial_C_Detect)检测头结构创新,适合科研创新度十足,强烈推荐 SC_C_Detect | 亲测在多个数据集能够实现大幅涨点 收录: YOLOv7高阶自研专栏介绍: http://t.csdnimg.cn/tYI0c ✨✨✨前沿最新计算机顶会复现 🚀🚀🚀YOLO…

试题二(15分)和试题三(15分) (软件设计师笔记)

&#x1f3e0;个人主页&#xff1a;尘觉主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是尘觉&#xff0c;希望我的文章可以帮助到大家&#xff0c;您的满意是我的动力&#x1f609; 在csdn获奖荣誉: &#x1f3c6;csdn城市之星2名 ⁣⁣⁣⁣ ⁣⁣⁣⁣ ⁣⁣⁣…

模糊C均值聚类(FCM)python

目录 一、模糊C均值聚类的原理 二、不使用skfuzzy的python代码 三、 使用skfuzzy的python代码 一、模糊C均值聚类的原理 二、不使用skfuzzy的python代码 import numpy as np import random import matplotlib.pyplot as plt plt.rcParams[font.sans-serif][SimHei] plt.r…

保障效率与可用,分析Kafka的消费者组与Rebalance机制

系列文章目录 上手第一关&#xff0c;手把手教你安装kafka与可视化工具kafka-eagle Kafka是什么&#xff0c;以及如何使用SpringBoot对接Kafka 架构必备能力——kafka的选型对比及应用场景 Kafka存取原理与实现分析&#xff0c;打破面试难关 防止消息丢失与消息重复——Kafka可…

【WinForm详细教程四】WinForm中的ProgressBar 、ImageList和ListView控件

文章目录 1.ProgressBar2. ImageList3.ListView控件 1.ProgressBar 用于显示某个操作的进度。 属性&#xff1a; Value: 表示当前进度条的值&#xff0c;其范围由Min和Max决定。Step: 设置每次调用PerformStep()方法时增加的步长。MarqueeAnimationSpeed: 在Style设置为Marq…

二叉树问题——前/中/后/层遍历问题(递归与栈)

摘要 博文主要介绍二叉树的前/中/后/层遍历(递归与栈)方法 一、前/中/后/层遍历问题 144. 二叉树的前序遍历 145. 二叉树的后序遍历 94. 二叉树的中序遍历 102. 二叉树的层序遍历 103. 二叉树的锯齿形层序遍历 二、二叉树遍历递归解析 // 前序遍历递归LC144_二叉树的前…