随手记:uniapp图片展示,剩余的堆叠

UI效果图:

 

实现思路:
循环图片数组,只展示几张宽度就为几张图片+边距的宽度,剩下的图片直接堆叠展示

点击预览的时候传入当前的下标,如果是点击堆叠的话,下标从堆叠数量开始计算
 

<template><!-- 查看图片展示 --><view class="image pos-re" :style="imageStyle"><u-image :width="width" :height="height" :src="formatImgUrl(item)" border-radius="8" :style="imgStyle" class="img" v-for="(item, index) in imagesList" @click="previewImage(0, index,item)"></u-image><view class="mask pos-ab" :style="maskStyle" v-if="imagesList.length > 4" @click="previewImage(1, 3)"><u-icon name="plus" size="28" color="#FFFFFF"></u-icon>{{imagesList.length+1  - imgNum }}</view></view>
</template><script>
export default {name:"showImage",props:{imagesList: {type: Array,default: () => {return []},},width: {type: [String, Number],default: 104,},height: {type: [String, Number],default: 104,},// 图片之间的右边距marginRight: {type: [String, Number],default: 10,},// 保留照片数imgNum: {type: [String, Number],default: 4,}},data() {return {baseFileUrl: process.uniEnv.BASE_FILEURL,imageStyle: {'width': '0rpx','overflow': 'hidden'},imgStyle: {'margin-right': '0rpx',},maskStyle: {width: '0rpx',height: '0rpx'},}},onLoad() {},watch: {imagesList:{handler(nV,oV){this.imgStyle.marginRight = this.marginRight + 'rpx';this.imageStyle.width = (this.width * this.imgNum ) + (this.marginRight * this.imgNum-1) + 'rpx';this.maskStyle.width = this.width + 'rpx';this.maskStyle.height = this.height + 'rpx';this.maskStyle.lineHeight = this.height + 'rpx';this.maskStyle.right = 0 + 'rpx';},immediate: true,deep: true}},methods: {formatImgUrl(img) {if (!img || img == '/static/images/image_noData.png') {return '/static/images/image_noData.png'}let imgs = img.split(',');return this.baseFileUrl + imgs[0]},previewImage(num, index, item) {let arr = [];if(this.imagesList.length){this.imagesList.forEach(item => {arr.push(this.baseFileUrl + item )})}if(!num) {uni.previewImage({current:index,urls: arr})}else{uni.previewImage({current: 3,urls: arr})}}}
}
</script><style lang="scss" scoped>.image{display: flex;.img{flex-shrink: 0;}.mask{text-align: center;background: '#1F2533';border-radius: 8rpx;opacity: 0.9;font-size: 28rpx;color: #FFFFFF;}}
</style>

成品展示:

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

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

相关文章

私有云和多云管理平台 | Cloudpods v3.11.4 正式发布

本次 3.11.4 更新亮点为&#xff1a;系统镜像引入社区镜像&#xff0c;用户可以一键导入各主流开源操作系统镜像&#xff0c;方便用户上手使用。持续迭代共享 LVM&#xff0c;支持快照&#xff0c;主备机等特性&#xff0c;修复迁移删除镜像缓存等 BUG。 功能优化 【费用】费…

Vue25-内置指令02:v-text指令

一、v-html对比v-text v-html支持结构的解析&#xff0c;v-text不支持结构的解析。 二、v-html的安全性问题 2-1、cookie的原理&#xff08;node.js&#xff09; 7天免登录&#xff0c;cookie实现。 cookie的本质就是类似于json的字符串&#xff0c;格式是&#xff1a;key-va…

数据安全:Web3时代的隐私保护新标准

随着数字化时代的到来&#xff0c;我们的生活已经完全依赖于互联网和数据交换。然而&#xff0c;随之而来的是对个人隐私和数据安全的日益关注。在这个信息爆炸的时代&#xff0c;数据泄露、个人隐私侵犯和网络攻击等问题日益突出&#xff0c;而Web3技术的崛起正带来了一种全新…

【AI】文心一言的使用分享

在数字化时代&#xff0c;人工智能&#xff08;AI&#xff09;技术的飞速发展正在改变我们的生活。文心一言&#xff0c;作为这一浪潮中的佼佼者&#xff0c;以其卓越的自然语言处理能力和广泛的应用场景&#xff0c;给我带来了前所未有的使用体验。在这篇分享中&#xff0c;我…

Sui Bridge在测试网上线并推出10万SUI激励计划

是一种为Sui设计的原生桥接协议&#xff0c;专门用于在Sui与其他网络之间桥接资产和数据。今天&#xff0c;Sui Bridge宣布在测试网上线。作为一种原生协议&#xff0c;Sui Bridge能够在Ethereum和Sui之间轻松且安全地转移ETH、wBTC、USDC和USDT&#xff0c;使其成为Sui基础设施…

基于 Python 解析 XML 文件并将数据存储到 MongoDB 数据库

1. 问题背景 在软件开发中&#xff0c;我们经常需要处理各种格式的数据。XML 是一种常用的数据交换格式&#xff0c;它可以存储和传输结构化数据。很多网站会提供 XML 格式的数据接口&#xff0c;以便其他系统可以方便地获取数据。 我们有这样一个需求&#xff1a;我们需要从…

GIGE 协议摘录 —— 照相机的标准特征列表(五)

系列文章目录 GIGE 学习笔记 GIGE 协议摘录 —— 设备发现&#xff08;一&#xff09; GIGE 协议摘录 —— GVCP 协议&#xff08;二&#xff09; GIGE 协议摘录 —— GVSP 协议&#xff08;三&#xff09; GIGE 协议摘录 —— 引导寄存器&#xff08;四&#xff09; GIGE 协议…

D 25章 进程的终止

D 25章 进程的终止 440 25.1 进程的终止&#xff1a;_exit()和exit() 440 1. _exit(int status)&#xff0c; status 定义了终止状态&#xff0c;父进程可调用 wait 获取。仅低8位可用&#xff0c; 调用 _exit() 总是成功的。 2.程序一般不会调用 _exit()&#xff0c; 而是…

CobaltStrike权限传递MSF

一、测试环境 操作系统&#xff1a; 1.VMware17 2.kali 6.1.0-kali5-amd64 3.Win10x64 软件&#xff1a; 1.cs4.0 2.metasploit v6.3.4-dev 二、测试思路 1.cs是一款渗透测试工具&#xff0c;但没有漏洞利用的模块&#xff0c;我们可以在拿到目标主机的权限后&#xff0c;将…

函数式开发接口( Consumer、Function)在实际开发中的应用场景

之前有个扫码下载文件需求&#xff0c;由于要同时进行记录下载人的记录。一开始用的是异步进行日志记录。发现有的用户扫码下载了一次文件&#xff0c;日志记录了三条。这种很容易联想到是因为网络抖动造成的。 问题代码 由于日志记录是异步的&#xff0c;文件下载需要时间。同…

不想搭集群,直接用spark

为了完成布置的作业&#xff0c;需要用到spark的本地模式&#xff0c;根本用不到集群&#xff0c;就不想搭建虚拟机&#xff0c;hadoop集群啥的&#xff0c;很繁琐&#xff0c;最后写作业还用不到集群&#xff08;感觉搭建集群对于我完成作业来说没有什么意义&#xff09;&…

代码解读 | Hybrid Transformers for Music Source Separation[05]

一、背景 0、Hybrid Transformer 论文解读 1、代码复现|Demucs Music Source Separation_demucs架构原理-CSDN博客 2、Hybrid Transformer 各个模块对应的代码具体在工程的哪个地方 3、Hybrid Transformer 各个模块的底层到底是个啥&#xff08;初步感受&#xff09;&#xff1…

DDei在线设计器-配置主题风格

DDeiCore-主题 DDei-Core插件提供了默认主题和黑色主题。 如需了解详细的API教程以及参数说明&#xff0c;请参考DDei文档 默认主题 黑色主题 使用指南 引入 import { DDeiCoreThemeBlack } from "ddei-editor";使用并修改设置 extensions: [......//通过配置&am…

君子签帮助物流组织打造线上签约平台,助力简化成本,高效运转

各类物流组织日常业务可能涉及“企业入驻、快递、整车运输、货运、仓储、供应链等”多种类型&#xff0c;各个环节都存在大量的文件/单据签署&#xff0c;网点、客户、司机、收货人遍布全国各地&#xff0c;复杂的签署需求&#xff0c;以及庞大的签字、用印需求&#xff0c;让各…

记录pytest中场景执行的token异常处理问题

前言中写了一个conftest钩子函数用于处理重复调用token的方法&#xff0c;http://t.csdnimg.cn/N4rCK&#xff0c;每个用例单独执行都很正常&#xff0c;但是批量执行时一直报错&#xff0c;token缓存处理也不生效。 所有的用例都报获取不到token&#xff0c;方法改了又改&…

虚拟化 之一 详解 jailhouse 架构及原理、软硬件要求、源码文件、基本组件

Jailhouse 是一个基于 Linux 实现的针对创建工业级应用程序的小型 Hypervisor&#xff0c;是由西门子公司的 Jan Kiszka 于 2013 年开发的&#xff0c;并得到了官方 Linux 内核的支持&#xff0c;在开源社区中获得了知名度和吸引力。 Jailhouse Jailhouse 是一种轻量级的虚拟化…

【复旦邱锡鹏教授《神经网络与深度学习公开课》笔记】感知器

感知器是一种非常早期的线性分类模型&#xff0c;作为一种简单的神经网络模型被提出。感知器是一种模拟生物神经元行为的机器&#xff0c;有与生物神经元相对应的部件&#xff0c;如权重&#xff08;突触&#xff09;、偏置&#xff08;阈值&#xff09;及激活函数&#xff08;…

颠覆与创新:探寻Facebook未来的发展路径

Facebook&#xff0c;这个曾经引领社交网络革命的巨头&#xff0c;在如今竞争激烈的科技市场中&#xff0c;正面临着前所未有的挑战和机遇。如何在不断变化的数字世界中保持竞争力&#xff0c;成为业界领先者&#xff0c;这是摆在Facebook面前的重要课题。本文将探寻Facebook未…

STM32开发过程中碰到的问题总结 - 1

文章目录 前言1. 怎么生成keil下可以使用的文件和gcc下编译使用的makefile2. STM32的时钟树3.怎么查看keil5下的编译工具链用的是哪个4. Arm编译工具链和GCC编译工具链有什么区别吗&#xff1f;5. 怎么查看Linux虚拟机是x86的还是aarch646. 怎么下载gcc-arm的编译工具链7.怎么修…

跟着AI学AI_07张量、数组、矩阵

说明这三个概念不是一个范畴的东西&#xff0c;但是很容易混淆&#xff0c;因此放到一起进行说明。 张量&#xff08;Tensor&#xff09; 张量是一个多维数组的通用概念&#xff0c;用于表示具有任意维度的数值数据。在数学和计算机科学中&#xff0c;张量是广泛用于表示数据的…