当前位置: 首页 > news >正文

uniapp 封装瀑布流组件

思路:

1.coulumns:需要分成几列

2.如何分布数据

3.计算每列的宽度

4.图片进行高度自适应

<template><view :style="{ margin: boxM }"><view class="flex flex-justify-start bg-red" style="background-color: #e8e0e0; border-radius: 20rpx; padding: 20rpx"><viewclass="waterfall-list"v-for="(item, index) in columnCount":key="index":style="{ width: width, margin: `0 ${itemGap}`, borderRadius: '20rpx' }"><view v-for="(el, i) in list[index]" :key="i" class="waterfall-item"><slot name="content" :item="el" /></view></view></view></view>
</template><script setup lang="ts">
import { getSysInfo } from '@/utils/permission'
type Props = {sideGap: stringitemGap: stringcolumnCount: numberdata: Array<any>
}
const props = defineProps<Props>()
let width = ref('')
const { screenRate } = getApp().globalData
//默认两边给出外边距
const boxM = computed(() => {return props.sideGap || '20rpx'
})
//每列之间的间距
const itemGap = computed(() => {return props.itemGap ? parseInt(props.itemGap) / 2 + 'rpx' : '10rpx'
})
//所要分成几列
const columnCount = computed(() => {return props.columnCount || 2
})
//传入的数据
const data = computed(() => {return props.data || []
})
const list = ref<any>([])
onMounted(() => {//计算每列宽度&&通过将数据遍历均分给每一列 直到分完为止let screenWidth = getSysInfo().windowWidthwidth.value = ((screenWidth - 40 - (columnCount.value - 1) * parseInt(itemGap.value)) / columnCount.value) * (1 / screenRate) + 'rpx'for (let i = 0; i < columnCount.value; i++) {list.value[i] = []}let i = 0data.value.forEach((el, index) => {if (i > columnCount.value - 1) {i = 0}list.value[i].push(el)i++})
})
</script><style scoped lang="scss">
.waterfall-list {&:first-child {margin-left: 0 !important;}&:last-child {margin-right: 0 !important;}.waterfall-item {border-radius: 20rpx;margin-bottom: 20rpx;}
}
</style>

<!-- 使用 -->
<water-fall :columnCount="2" :data="arr"><template v-slot:content="{ item }"><view class="" style=""><image :src="item.url" style="width: 100%; border-radius: 20rpx" mode="widthFix"></image><view class="" style="text-align: center">123</view></view></template></water-fall>...<script setup lang="ts">
import waterFall from '@/components/Waterfall'
const arr = [{ url: 'http://localhost:3000/uploadSubIcon/1718875685835-WechatIMG3260.png' },{ url: 'http://localhost:3000/uploadSubIcon/1716641663545-WechatIMG367.png' },{ url: 'http://localhost:3000/uploadSubIcon/1718875685835-WechatIMG3260.png' },{ url: 'http://localhost:3000/uploadSubIcon/1718875685835-WechatIMG3260.png' },{ url: 'http://localhost:3000/uploadSubIcon/1718875685835-WechatIMG3260.png' },{ url: 'http://localhost:3000/uploadSubIcon/1718875685835-WechatIMG3260.png' },{ url: 'http://localhost:3000/uploadSubIcon/1718875685835-WechatIMG3260.png' },{ url: 'http://localhost:3000/uploadSubIcon/1718875685835-WechatIMG3260.png' },{ url: 'http://localhost:3000/uploadSubIcon/1718875685835-WechatIMG3260.png' },{ url: 'http://localhost:3000/uploadSubIcon/1718875685835-WechatIMG3260.png' },{ url: 'http://localhost:3000/uploadSubIcon/1718875685835-WechatIMG3260.png' },{ url: 'http://localhost:3000/uploadSubIcon/1718875685835-WechatIMG3260.png' }
]
</script>

相关文章:

uniapp 封装瀑布流组件

思路&#xff1a; 1.coulumns&#xff1a;需要分成几列 2.如何分布数据 3.计算每列的宽度 4.图片进行高度自适应 <template><view :style"{ margin: boxM }"><view class"flex flex-justify-start bg-red" style"background-colo…...

pd虚拟机去虚拟化是什么意思?pd虚拟机去虚拟化教程 PD虚拟机优化设置

Parallels Desktop for Mac&#xff08;PD虚拟机&#xff09;去虚拟化是指在虚拟机&#xff08;Virtual Machine&#xff0c;简称 VM&#xff09;中禁用或减少虚拟化层的影响&#xff0c;使其表现更接近于物理机。这种操作通常用于提高虚拟机的性能或解决某些软件兼容性问题。具…...

低代码研发项目管理流程优化:提效与创新的双重驱动

随着信息技术的迅猛发展&#xff0c;软件项目的规模和复杂度日益增加&#xff0c;传统的软件开发方式已经难以满足快速迭代和高效交付的需求。在这一背景下&#xff0c;低代码平台应运而生&#xff0c;以其高效、灵活、易用的特点&#xff0c;迅速成为软件行业的新宠。然而&…...

32位版 C 库函数time 将在 2038 年溢出,那到时候,它该何去何从

简单地说&#xff0c;通常不必担心&#xff0c;在64位操作系统已经成为主流的今天这基本上不是问题&#xff08;在写这篇回答的时候&#xff0c;我才发现我甚至找不到32位的机器来测试&#xff09;刚好我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「32库函数的…...

C语言 printf函数缓冲机制

printf不立即打印到stdout的原因 printf函数使用了缓冲机制。当我们调用printf时,输出通常不会立即显示在屏幕上,而是先存储在一个缓冲区中。这是为了提高I/O操作的效率。 缓存数据输出的原理 stdio库维护了一个缓冲区。当缓冲区满了,或者在特定条件下,缓冲区的内容会被刷新…...

【Linux进阶】文件系统8——硬链接和符号连接:ln

在Linux下面的链接文件有两种&#xff0c; 一种是类似Windows的快捷方式功能的文件&#xff0c;可以让你快速地链接到目标文件&#xff08;或目录)&#xff1b;另一种则是通过文件系统的inode 链接来产生新文件名&#xff0c;而不是产生新文件&#xff0c;这种称为硬链接&…...

代码随想录算法训练营Day64|拓扑排序(卡码网117)、dijkstra朴素版

拓扑排序 117. 软件构建 (kamacoder.com) 拓扑排序简单的说是将一个有向图转为线性的排序。 它将图中的所有结点排序成一个线性序列&#xff0c;使得对于任何的边uv&#xff0c;结点u在序列中都出现在结点v之前&#xff0c;这样的序列满足图中所有的前驱-后继关系。 拓扑排…...

neo4j 图数据库:Cypher 查询语言、医学知识图谱

neo4j 图数据库&#xff1a;Cypher 查询语言、医学知识图谱 Cypher 查询语言创建数据查询数据查询并返回所有节点查询并返回所有带有特定标签的节点查询特定属性的节点及其所有关系和关系的另一端节点查询从名为“小明”的节点到名为“小红”的节点的路径 更新数据更新一个节点…...

数据结构基础--------【二叉树基础】

二叉树基础 二叉树是一种常见的数据结构&#xff0c;由节点组成&#xff0c;每个节点最多有两个子节点&#xff0c;左子节点和右子节点。二叉树可以用来表示许多实际问题&#xff0c;如计算机程序中的表达式、组织结构等。以下是一些二叉树的概念&#xff1a; 二叉树的深度&a…...

数据开源 | Magic Data大模型高质量十万轮对话数据集

能够自然的与人类进行聊天交谈&#xff0c;是现今的大语言模型 (LLM) 区别于传统语言模型的重要能力之一&#xff0c;近日OpenAI推出的GPT-4o给我们展示了这样的可能性。 对话于人类来说是与生俱来的&#xff0c;但构建具备对话能力的大模型是一项不小的挑战&#xff0c;收集高…...

webpack之ts打包

tsconfig.json配置 // 是否对js文件进行编译&#xff0c;默认false"allowJs": true,// 是否检查js代码是否符合语法规范,默认false(引入的外部文件有可能语法有问题)"checkJs": true, allowJs和checkJs基本是同时出现&#xff0c;因为有了allowJs 这个检查…...

MATLAB数据统计描述和分析

描述性统计就是搜集、整理、加工和分析统计数据&#xff0c; 使之系统化、条理化&#xff0c;以显示出数据资料的趋势、特征和数量关系。它是统计推断的基础&#xff0c;实用性较强&#xff0c;在数学建模的数据描述部分经常使用。 目录 1.频数表和直方图 2 .统计量 3.统计…...

设计分享—国外后台界面设计赏析

国外后台界面设计将用户体验放在首位&#xff0c;通过直观易懂的布局和高效的交互设计&#xff0c;提升用户操作效率和满意度。 设计不仅追求美观大方&#xff0c;还注重功能的实用性和数据的有效展示&#xff0c;通过图表和图形化手段使数据更加直观易懂。 采用响应式布局&a…...

最小生成树(算法篇)

算法之最小生成树 最小生成树 概念&#xff1a; 最小生成树是一颗连接图G所有顶点的边构成的一颗权最小的树&#xff0c;最小生成树一般是在无向图中寻找。最小生成树共有N-1条边(N为顶点数)。 算法&#xff1a; Prim算法 概念&#xff1a; Prim(普里姆)算法是生成最小生…...

教师管理小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;教师管理&#xff0c;个人认证管理&#xff0c;课程信息管理&#xff0c;课堂记录管理&#xff0c;课堂统计管理&#xff0c;留言板管理 微信端账号功能包括&#xff1a;系统首页&#xff0c;课程信息…...

Selenium 等待

环境&#xff1a; Python 3.8 selenium3.141.0 urllib31.26.19 Chromium 109.0.5405.0 &#xff08;32 位&#xff09; # 1 固定等待&#xff08;time&#xff09; # 固定待是利用python语言自带的time库中的sleep()方法&#xff0c;固定等待几秒。 # 这种方式会导致这个脚本运…...

安装easy-handeye

一、aruco_ros配置 mkdir -p ~/ros_ws/src cd ~/ros_ws/src git clone -b melodic-devel https://github.com/pal-robotics/aruco_ros.git cd .. catkin_make 二、visp配置(需要联外网下载东西&#xff0c;不然会一直出问题&#xff09; sudo apt-get install ros-melodic-…...

【面试题】MySQL 索引(第二篇)

1.索引 索引是数据库中的一个核心概念&#xff0c;它对于提高数据库查询效率至关重要。以下是索引的详细概念解析&#xff1a; 一、索引的定义 基本定义&#xff1a;索引是一个排序的列表&#xff0c;其中存储着索引的值和包含这些值的数据所在行的物理地址&#xff08;或逻…...

4. 小迪安全v2023笔记 javaEE应用

4. 小迪安全v2023笔记 javaEE应用 ​ 大体上跟随小迪安全的课程&#xff0c;本意是记录自己的学习历程&#xff0c;不能说是完全原创吧&#xff0c;大家可以关注一下小迪安全。 若有冒犯&#xff0c;麻烦私信移除。 默认有java基础。 文章目录 4. 小迪安全v2023笔记 javaEE应…...

anaconda修改安装的默认环境

&#x1f4da;博客主页&#xff1a;knighthood2001 ✨公众号&#xff1a;认知up吧 &#xff08;目前正在带领大家一起提升认知&#xff0c;感兴趣可以来围观一下&#xff09; &#x1f383;知识星球&#xff1a;【认知up吧|成长|副业】介绍 ❤️如遇文章付费&#xff0c;可先看…...

Python3.8环境下的OpenOPC实战:从模拟服务器搭建到KEPServerEX数据读写一条龙

Python3.8环境下的OpenOPC实战&#xff1a;从模拟服务器搭建到KEPServerEX数据读写全流程指南 工业自动化领域的数据采集一直是开发者需要掌握的核心技能之一。对于没有硬件设备或OPC服务器许可的学习者来说&#xff0c;如何在本地搭建完整的测试环境成为入门的第一道门槛。本文…...

Python 爬虫进阶技巧:内网公开资源合规爬虫采集

前言 在企业园区、高校校园、政务机关、科研机构等封闭网络环境中&#xff0c;普遍存在内网公开资源服务节点&#xff0c;这类资源仅对内网 IP 段开放访问权限&#xff0c;外网无法直接穿透接入&#xff0c;包含公开文档库、共享文件服务器、内部资讯公告、教学资源库、政务公…...

5分钟掌握暗黑破坏神2存档编辑:免费Web工具完整指南

5分钟掌握暗黑破坏神2存档编辑&#xff1a;免费Web工具完整指南 【免费下载链接】d2s-editor 项目地址: https://gitcode.com/gh_mirrors/d2/d2s-editor 还在为暗黑破坏神2中反复刷装备而烦恼吗&#xff1f;想快速体验不同职业的build却不想从头练级&#xff1f;d2s-ed…...

用TensorFlow Lite Micro在Arduino上跑个‘Hello World’:从模型部署到LED闪烁的完整流程

在Arduino Nano 33 BLE Sense上部署TinyML模型的实战指南 当微控制器遇上机器学习&#xff0c;TinyML技术正在重新定义边缘计算的边界。本文将带您完成从TensorFlow Lite模型训练到Arduino硬件部署的全流程&#xff0c;通过控制LED亮度直观展示正弦波预测结果&#xff0c;让算…...

RSLinx OPC Server配置避坑指南:解决IP网段、Topic配置与标签读取的常见问题

RSLinx OPC Server实战排障手册&#xff1a;从IP冲突到标签解析的深度解决方案 当工业自动化系统遇上OPC Server通讯故障&#xff0c;工程师的调试时间往往以小时为单位流失。不同于基础配置教程&#xff0c;本文将直击RSLinx OPC Server部署中的七大高发故障场景&#xff0c;…...

英雄联盟智能助手League Akari:重新定义你的游戏体验边界

英雄联盟智能助手League Akari&#xff1a;重新定义你的游戏体验边界 【免费下载链接】League-Toolkit An all-in-one toolkit for LeagueClient. Gathering power &#x1f680;. 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 在英雄联盟的竞技世界中&…...

8086/8088单板机VSCode集中环境开发编译(第二版整理)

对于8086/8088单板机而言&#xff0c;集中的开发环境方便友好。下面是使用VSCode集中开发环境对8086/8088单板机集中编辑、编译、串口下载的使用步骤第一步&#xff0c;在VSCode文件中&#xff0c;选择打开例程文件夹第二部&#xff0c;根据需要对例程main.c进行编辑修改第三步…...

从零到一:在云端服务器安全部署Jupyter Lab/Notebook

1. 云端服务器基础环境准备 刚拿到一台全新的云服务器时&#xff0c;就像搬进毛坯房需要先通水电。我以阿里云ECS为例&#xff08;其他云服务商操作类似&#xff09;&#xff0c;从系统初始化到基础安全加固&#xff0c;带你走完这段必经之路。 首先用SSH连接服务器时&#xff…...

如何一站式破解Widevine DRM加密视频:智能解密工具完全指南

如何一站式破解Widevine DRM加密视频&#xff1a;智能解密工具完全指南 【免费下载链接】video_decrypter Decrypt video from a streaming site with MPEG-DASH Widevine DRM encryption. 项目地址: https://gitcode.com/gh_mirrors/vi/video_decrypter 还在为付费视频…...

ClawX:桌面化AI Agent编排平台,降低OpenClaw使用门槛

1. 项目概述&#xff1a;ClawX&#xff0c;为OpenClaw AI Agent打造的桌面门户如果你和我一样&#xff0c;对AI Agent&#xff08;智能体&#xff09;的潜力感到兴奋&#xff0c;但又对在终端里敲命令、编辑YAML配置文件、管理进程这些繁琐操作感到头疼&#xff0c;那么ClawX的…...