vue3 uniapp封装一个瀑布流组件
新增组件m-waterfall 这样就可以在页面直接使用 不用在引入了
<template><view class="m-waterfall"><view id="m-left-column" class="m-column"><slot name="left" :leftList="leftList"></slot></view><view id="m-right-column" class="m-column"><slot name="right" :rightList="rightList"></slot></view></view>
</template><script setup>
/*** @param value 瀑布流数据* @param addTime 插入数据的时间间隔* @param keyIdData / id值,用于清除某一条数据时,根据此idKey名称找到并移除*/import {computed,defineProps,toRefs} from "vue"const props=defineProps({// 瀑布流数据value: {required: true,type: Array,default: ()=>[]},// 每次向结构插入数据的时间间隔,间隔越长,越能保证两列高度相近,但是对用户体验越不好addTime: {type: [Number, String],default: 200},// id值,用于清除某一条数据时,根据此idKey名称找到并移除keyIdData: {type: String,default: 'id'}})const {value,addTime,keyIdData} = toRefs(props)const leftList = ref([])const rightList = ref([])const tempList = ref([])const pendingImages = ref(new Map()) // 用于追踪待加载的图片const copyFlowList= computed (()=> {return cloneData(value.value);})
// 记录正在加载的图片数量const loadingCount = ref(0)// 处理图片加载完成事件const preloadImage = async (item) => {return new Promise((resolve) => {if (!item.image) {resolve(item)return}// 如果这个图片已经在加载中,返回现有的 promiseif (pendingImages.value.has(item.image)) {return pendingImages.value.get(item.image)}const promise = new Promise((resolveImage) => {uni.getImageInfo({src: item.image,success: (res) => {// 保存图片的实际尺寸信息到 itemitem.imageWidth = res.widthitem.imageHeight = res.heightpendingImages.value.delete(item.image)resolveImage(item)},fail: () => {pendingImages.value.delete(item.image)resolveImage(item)}})})pendingImages.value.set(item.image, promise)resolve(promise)})}// const emit=defineEmits(['handleImageLoad'])watch(()=>value.value,(nVal,oVal)=>{let startIndex = Array.isArray(oVal) && oVal.length > 0 ? oVal.length : 0;tempList.value = tempList.value.concat(cloneData(nVal.slice(startIndex)));splitData();})onMounted(()=>{tempList.value = cloneData(copyFlowList.value);setTimeout(()=>{splitData();},200)})const instance = getCurrentInstance()const getColumnHeight = (columnId) => {return new Promise((resolve) => {uni.createSelectorQuery().in(instance).select(columnId).boundingClientRect(data => {resolve(data ? data.height : 0)}).exec()})}const splitData = async () => {if (tempList.value.length === 0) returnconst item = tempList.value[0]if (!item) returntry {// 等待图片预加载完成await preloadImage(item)// 获取两列的高度const [leftHeight, rightHeight] = await Promise.all([getColumnHeight('#m-left-column'),getColumnHeight('#m-right-column')])// 根据高度决定放入哪一列if (leftHeight <= rightHeight) {leftList.value.push(item)} else {rightList.value.push(item)}// 移除已处理的项目tempList.value.splice(0, 1)// 继续处理下一个项目if (tempList.value.length) {setTimeout(() => {splitData()}, Number(props.addTime))}} catch (error) {console.error('Error in splitData:', error)// 发生错误时也移除当前项目,继续处理下一个tempList.value.splice(0, 1)if (tempList.value.length) {splitData()}}}// 复制而不是引用对象和数组const cloneData=(data)=>{if(data){return JSON.parse(JSON.stringify(data));}else{return [];}}</script><style lang="scss" scoped>.m-waterfall {margin-top: 20rpx;display: flex;flex-direction: row;align-items: flex-start;gap: 10rpx;
}.m-column {display: flex;flex: 1;flex-direction: column;height: auto;
}.m-image {width: 100%;}
</style>
组件使用
<m-waterfall :value="product"><!-- 左边数据 --><template v-slot:left="{leftList}"><view @click="addDta" class="prodecutitem" v-for="(item,index) in leftList" :key="index"><view style="width: 100%;"><m-imgage :url="item.image"></m-imgage></view><view class="title">{{item.title}}</view><view class="desc">{{item.title}}</view></view></template><!-- 右边数据 --><template v-slot:right="{rightList}"><view class="prodecutitem" v-for="(item,index) in rightList" :key="index"><view><m-imgage :url="item.image"></m-imgage></view><view class="title">{{item.title}}</view><view class="desc">{{item.title}}</view></view></template></m-waterfal>数据const product=ref([{title:'水果蔬菜1',image:imgSrc.value},{title:'水果蔬菜2',image:"https://img2.baidu.com/it/u=3893165480,918722033&fm=253&fmt=auto&app=120&f=JPEG?w=729&h=1215"},{title:'水果蔬菜3',image:imgSrc.value},{title:'水果蔬菜1',image:imgSrc.value},{title:'水果蔬菜3',image:imgSrc.value}])
相关文章:
vue3 uniapp封装一个瀑布流组件
新增组件m-waterfall 这样就可以在页面直接使用 不用在引入了 <template><view class"m-waterfall"><view id"m-left-column" class"m-column"><slot name"left" :leftList"leftList"></slot&…...
Android Room 持久化库的介绍及使用方法
Android Room 是 Android Jetpack 组件之一,是 Google 官方推出的用于简化 SQLite 数据库操作的持久化库。它提供了一个抽象层,允许开发者在 SQLite 数据库上执行常见的 CRUD 操作,同时处理数据库连接、数据迁移和查询优化等底层细节。 Andr…...
Go语言中http.Transport的Keep-Alive配置与性能优化方法
在Go语言中,http.Transport是一个用于发送HTTP或HTTPS请求的客户端工具,它提供了许多可配置的参数以优化性能。其中,Keep-Alive配置是性能优化的关键部分。以下是对http.Transport的Keep-Alive配置与性能优化方法的详细解释: 一、…...
设计模式03:行为型设计模式之策略模式的使用情景及其基础Demo
1.策略模式 好处:动态切换算法或行为场景:实现同一功能用到不同的算法时和简单工厂对比:简单工厂是通过参数创建对象,调用同一个方法(实现细节不同);策略模式是上下文切换对象,调用…...
C# 多线程 Task TPL任务并行
先总结一下 之前发展过程的要点 1: 为了保证多线程正确顺序执行 线程同步 2: 为了节省操作系统线程资源 线程池 异步 方式管理 正常来讲 使用这俩个要点 进行使用 多线程可以满足开发使用需求 但是 新的问题产生了 那就是 多个异步操作 需要编写大量的代…...
【matlab】matlab知识点及HTTP、TCP通信
1、矩阵运算 点乘:对于两个同维度的向量,点乘结果是这两个向量对应分量的乘积之和。 点除:是指对两个数组的对应元素进行除法运算。 点幂:表示元素对元素的幂运算。 >> A[1,2,3;4,5,6]; B[1,1,1;2,2,2]>> D1B.*AD…...
kalilinux - msf和永恒之蓝漏洞
Kali最强渗透工具 - metasploit metasploit是什么? msf是一款开源安全漏洞利用和测试工具,集成了各种平台上常见的溢出漏洞和流行的sheelcode,并持续保持更新。 具体操作 1、先切换到root用户,使用msfdb init命令初始化metaspl…...
网络安全测评质量管理与标准解读
大家读完觉得有帮助记得关注和点赞!!! 注意说明 刚开始写过一些比较专业的分享,较多粉丝反应看不懂,本次通过大众的通俗易懂的词汇先了解概念然后再分享规范和详细的技术原理 一、网络安全测评质量管理 网络安全测…...
Cesium根据地图的缩放zoom实现不同级别下geojson行政边界的对应展示
实现效果: 随着地图的缩放,展示对应缩放级别下的行政边界。 准备数据: 1.国家行政边界数据 (country.json) 2.省级行政边界数据 (province.json) 3.市级行政边界数据(city.json&…...
Linux初识:【shell命令以及运行原理】【Linux权限的概念与权限管理】
目录 一.shell命令以及运行原理 二.Linux权限的概念与权限管理 2.1Linux权限的概念 sudo普通用户提权 2.2Linux权限管理 2.2.1文件访问者的分类(人) 2.2.2文件类型和访问权限(事物属性) 2.2.3文件权限值的表示方法 字符…...
深入剖析 Wireshark:网络协议分析的得力工具
在网络技术的广阔领域中,网络协议分析是保障网络正常运行、优化网络性能以及进行网络安全防护的关键环节。而 Wireshark 作为一款开源且功能强大的网络协议分析工具,在网络工程师、安全专家以及网络技术爱好者中广受欢迎。本文将深入介绍 Wireshark 的功…...
【AIGC】SYNCAMMASTER:多视角多像机的视频生成
标题:SYNCAMMASTER: SYNCHRONIZING MULTI-CAMERA VIDEO GENERATION FROM DIVERSE VIEWPOINTS 主页:https://jianhongbai.github.io/SynCamMaster/ 代码:https://github.com/KwaiVGI/SynCamMaster 文章目录 摘要一、引言二、使用步骤2.1 TextT…...
PyTorch框架——基于深度学习YOLOv5神经网络水果蔬菜检测识别系统
基于深度学习YOLOv5神经网络水果蔬菜检测识别系统,其能识别的水果蔬菜有15种,# 水果的种类 names: [黑葡萄, 绿葡萄, 樱桃, 西瓜, 龙眼, 香蕉, 芒果, 菠萝, 柚子, 草莓, 苹果, 柑橘, 火龙果, 梨子, 花生, 黄瓜, 土豆, 大蒜, 茄子, 白萝卜, 辣椒, 胡萝卜,…...
Redisson中红锁(RedLock)的实现
一、什么是红锁 当在单点redis中实现redis锁时,一旦redis服务器宕机,则无法进行锁操作。因此会考虑将redis配置为主从结 构,但在主从结构中,数据复制是异步实现的。假设在主从结构中,master会异步将数据复制到slave中…...
小结:路由器和交换机的指令对比
路由器和交换机的指令有一定的相似性,但也有明显的区别。以下是两者指令的对比和主要差异: 相似之处 基本操作 两者都支持类似的基本管理命令,比如: 进入系统视图:system-view查看当前配置:display current…...
使用yarn命令创建Vue3项目
文章目录 1.技术栈2.创建流程2.1创建vue3项目2.2选择配置项2.3进入项目目录 3.使用Yarn启动项目3.1安装依赖3.2运行项目 1.技术栈 yarnvitevue3 2.创建流程 2.1创建vue3项目 vue create 项目名称2.2选择配置项 直接回车可选择Vue3 2.3进入项目目录 cd 项目名称默认在当前…...
Three.js+Vue3+Vite应用lil-GUI调试开发3D效果(三)
前期文章中我们完成了创建第一个场景、添加轨道控制器的功能,接下来我们继续阐述其他的功能,本篇文章中主要讲述如何应用lil-GUI调试开发3D效果,在开始具体流程和步骤之前,请先查看之前的内容,因为该功能必须在前期内容…...
K8S集群常用命令
1,查看pod kubectl get pods -A 查看所有的pod kubectl get pods 这个只查看namespace为default下的pod,也就是只查看默认命名空间下的pod kubectl get pod -A -o wide 查看所有的pod,并且放出的信息更全(包含了pod的ip࿰…...
【优先算法】滑动窗口--(结合例题讲解解题思路)(C++)
目录 1. 例题1:最大连续1的个数 1.1 解题思路 1.2代码实现 1.3 错误示范如下:我最开始写了一种,但是解答错误,请看,给大家做个参考 2. 将 x 减到 0 的最小操作数 2.1解题思路 2.2代码实现 1. 例题1ÿ…...
mayavi -> python 3D可视化工具Mayavi的安装
前言 Mayavi是一个基于VTK(Visualization Toolkit)的科学计算和可视化工具,主要用于数据可视化和科学计算领域。 它提供了一系列的高级可视化工具,包括2D和3D图形、表面和体积渲染、流场可视化等。Mayavi可以通过Python脚本进行调…...
Android Wi-Fi 连接失败日志分析
1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分: 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析: CTR…...
【OSG学习笔记】Day 18: 碰撞检测与物理交互
物理引擎(Physics Engine) 物理引擎 是一种通过计算机模拟物理规律(如力学、碰撞、重力、流体动力学等)的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互,广泛应用于 游戏开发、动画制作、虚…...
Java 8 Stream API 入门到实践详解
一、告别 for 循环! 传统痛点: Java 8 之前,集合操作离不开冗长的 for 循环和匿名类。例如,过滤列表中的偶数: List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...
Admin.Net中的消息通信SignalR解释
定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...
FFmpeg 低延迟同屏方案
引言 在实时互动需求激增的当下,无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作,还是游戏直播的画面实时传输,低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架,凭借其灵活的编解码、数据…...
JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作
一、上下文切换 即使单核CPU也可以进行多线程执行代码,CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短,所以CPU会不断地切换线程执行,从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...
成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战
在现代战争中,电磁频谱已成为继陆、海、空、天之后的 “第五维战场”,雷达作为电磁频谱领域的关键装备,其干扰与抗干扰能力的较量,直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器,凭借数字射…...
C# 求圆面积的程序(Program to find area of a circle)
给定半径r,求圆的面积。圆的面积应精确到小数点后5位。 例子: 输入:r 5 输出:78.53982 解释:由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982,因为我们只保留小数点后 5 位数字。 输…...
基于Java+MySQL实现(GUI)客户管理系统
客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息,对客户进行统一管理,可以把所有客户信息录入系统,进行维护和统计功能。可通过文件的方式保存相关录入数据,对…...
免费数学几何作图web平台
光锐软件免费数学工具,maths,数学制图,数学作图,几何作图,几何,AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...
