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

news2024/11/25 6:50:03

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.coloradmin.cn/o/1818971.html

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

相关文章

比人工快100倍!给3D模型用上轻量化,老爷机也能起飞!!!!!!

3D可视化开发&#xff0c;考虑最多的要素&#xff0c;当属模型加载流畅度和应用性。但面对单位的电脑、不能升级硬盘的笔记本等&#xff0c;可能还是无法体会到模型丝滑加载的畅快。 况且3D模型数据、格式等&#xff0c;也在不断发展扩充&#xff0c;昔日手工就能“调教”的3D…

CSS Flexbox(弹性布局)

目录 &#x1f587;️什么是弹性布局&#xff1f; &#x1f587;️容器属性 ○ flex-direction ○ justify-content ○ align-items ○ flex-warp ○ align-content &#x1f587;️项目属性 ○ order ○ flex &#x1f587;️总结 提示: 如果你是小白&#xff0c;不…

CentOS7安装nginx【巨详细】

CentOS7安装nginx 安装依赖 1.安装gcc&#xff0c;nginx 编译时依赖 gcc 环境 # 安装c yum install gcc-c# 查看版本 gcc -v正常情况显示如下 2.安装openssl 安全套接字层密码库&#xff0c;用于通信加密 yum install -y openssl openssl-devel3.安装zlib,zlib 库 提供了很多…

linux搭建sftp服务

1. 添加用户及用户组 使用 groupadd sftpgroup 添加sftpgroup 用户组&#xff1b; 使用useradd -G sftpgroup -s /sbin/nologin cmssftp给sftpgroup 添加cmssftp用户&#xff1b; 使用passwd cmssftp给用户cmssftp进行设置密码(默认为:654321)。具体如下图所示&#xff1a; 2.…

Flarum 安装和使用教程

随着开源社区的日益繁荣&#xff0c;人们对社区品质的要求也越来越高。传统的 BBS 论坛模式已经难以满足现代用户对美观、便捷、互动性的需求。搭建一个现代化的高品质社区&#xff0c;成为许多网站管理者的迫切需求和共同挑战。 今天就给大家安利一款现代化的、优雅的开源论坛…

028、工具_Pipeline

Redis客户端执行一条命令分为如下四个过程: 1)发送命令 2)命令排队 3)命令执行 4)返回结果 其中1)+4)称为Round Trip Time(RTT,往返时间)。 Pipeline(它能将一组Redis命令进 行组装,通过一次RTT传输给Redis,再将这组Redis命令的执行结果按顺序返回给客户端,图3-…

2024年高考:计算机相关专业还值得选择吗?

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;日常聊聊 ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 行业竞争现状 市场饱和与新兴技术的影响 如何保持竞争力 专业与个人的匹配度判断 专业核心课程与技术能力 个人兴趣与职业…

MYSQL 三、mysql基础知识 5(变量、流程控制与游标)

一、变量 在MySQL数据库的存储过程和函数中&#xff0c;可以使用变量来存储查询或计算的中间结果数据&#xff0c;或者输出最终的结果数据。 在 MySQL 数据库中&#xff0c;变量分为 系统变量 以及 用户自定义变量 。 1.1 系统变量 1.1.1 系统变量分类 变量由系统定义…

汽车EDI:BRP EDI项目案例

项目背景 BRP Inc.使用EDI&#xff08;电子数据交换&#xff09;来处理其与供应商、客户和合作伙伴之间的业务交流。通过EDI&#xff0c;BRP可以在各种业务流程中自动化数据交换&#xff0c;例如采购订单、发货通知、发票、付款和库存信息等&#xff0c;从而提高操作效率、降低…

【Python】中的X[:,0]、X[0,:]、X[:,:,0]、X[:,:,1]、X[:,m:n]、X[:,:,m:n]和X[: : -1]

Python中 x[m,n]是通过numpy库引用数组或矩阵中的某一段数据集的一种写法,m代表第m维,n代表m维中取第几段特征数据。 通常用法: x[:,n]或者x[n,:] X[:,0]表示对一个二维数组,取该二维数组第一维中的所有数据,第二维中取第0个数据。 X[0,:]使用类比前者。 举例说明: x[:,0…

20240613每日前端-------vue3实现聊天室(二)

看效果图&#xff1a; 今天具体讲下&#xff0c;聊天消息框的布局&#xff1a; 消息框大致分为两块&#xff1a; 别人发来的消息自己发出的消息 元素如下&#xff1a; 头像消息发送人发送时间 html代码设计如下&#xff1a; 整体先用一个div作为外边框&#xff0c;观察上面…

【算法】Graham 凸包扫描算法 ( 凸包概念 | 常用的凸包算法 | 角排序 | 叉积 | Python 代码示例 )

文章目录 一、Graham 凸包扫描算法1、凸包概念2、常用的凸包算法3、Graham 凸包扫描算法 二、Graham 算法前置知识点1、角排序2、叉积3、算法过程分析 三、代码示例1、完整代码示例2、执行结果 使用 Graham 算法绘制的凸包效果 : 博客代码下载 : https://download.csdn.net/d…

提升设计效率,选择亿达四方SolidWorks代理服务

在当今快速发展的设计和制造行业中&#xff0c;拥有高效、可靠的工具是企业保持竞争力的关键。作为设计领域的领军软件&#xff0c;SolidWorks以其强大的三维建模功能、直观的用户界面以及广泛的行业应用而闻名。然而&#xff0c;要充分发挥这款软件的潜力&#xff0c;选择一个…

2024下《系统分析师》50个高频考点汇总!背就有效

宝子们&#xff01;上半年软考已经结束一段时间了&#xff0c;准备备考下半年软考高级-系统分析师的小伙伴可以开始准备了&#xff0c;毕竟高级科目的难度可是不低的&#xff0c;相信参加过上半年系分的小伙伴深有体会。 这里给大家整理了50个高频考点&#xff0c;涵盖全书90%…

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

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

Java老人护理上门服务类型系统小程序APP源码

&#x1f338; 老人上门护理服务系统&#xff1a;温暖与专业并存 &#x1f338; 一、&#x1f3e0; 走进老人上门护理服务系统 随着社会的快速发展&#xff0c;我们越来越关注老年人的生活质量。老人上门护理服务系统应运而生&#xff0c;它结合了现代科技与人性化服务&#…

stable-diffusion.cpp 文字生成图片

纯 C/C 中 [Stable Diffusion] 的推断 https://github.com/CompVis/stable-diffusion ## 特点 - 基于 [ggml]&#xff08;https://github.com/ggerganov/ggml&#xff09; 的普通 C/C 实现&#xff0c;工作方式与 [llama.cpp]&#xff08;https://github.com/ggerganov/llam…

Python提取PowerPoint演示文稿表格保存到文本及Excel文件

PowerPoint作为广泛使用的演示工具&#xff0c;常被用于展示各类数据报告和分析结果&#xff0c;其中&#xff0c;表格以其直观性和结构性成为阐述数据关系的不二之选。然而&#xff0c;在数据分析、文档归档或跨平台分享的场景下&#xff0c;幻灯片中的表格功能难以满足需求&a…

电脑桌面提醒做事的app 好用的桌面提醒app

在快节奏的现代生活中&#xff0c;我们每天都要通过电脑处理大量的工作事项。然而&#xff0c;繁忙的工作节奏有时会导致我们遗忘某些重要任务&#xff0c;从而带来不必要的损失。为了避免这种情况&#xff0c;选择一款好用的桌面提醒app显得尤为重要。 想象一下&#xff0c;你…

Java中的方法重写与重载

在Java编程语言中&#xff0c;方法重写&#xff08;Override&#xff09;和方法重载&#xff08;Overload&#xff09;是实现代码多态性的两种基本方式。它们允许程序员以多种方式使用相同的方法名&#xff0c;增加了程序的可读性和可重用性&#xff0c;但它们的应用场景和规则…