随手记: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.mzph.cn/web/26300.shtml

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

相关文章

力扣每日一题(2024-06-13)2813. 子序列最大优雅度

基于官方题解&#xff0c;进行补充说明 给你一个长度为 n 的二维整数数组 items 和一个整数 k 。 items[i] [profiti, categoryi]&#xff0c;其中 profiti 和 categoryi 分别表示第 i 个项目的利润和类别。 现定义 items 的 子序列 的 优雅度 可以用 total_profit distinct_…

Flutter InteractiveViewer CustomPaint的使用总结

最近产品上有个图片编辑的需求&#xff0c;需要对编辑区域做放大和缩小&#xff0c; 以方便用户编辑图片。做起来远比博主当初预想的要难受。这期间遇到几个问题。一一做一下记录。 如果只是单纯的缩放&#xff0c;没有对缩放的内容进行改变和更新&#xff0c; 那么基本没啥问…

go语言,拼接字符串有哪些方式

目录 第一种方式&#xff1a; 使用加号"" 第二种方式&#xff1a; 使用fmt.Sprintf 第三种方式&#xff1a; 使用strings.Join 第四种方式&#xff1a; 使用strings.Builder 第五种方式&#xff1a; 使用bytes.Buffer go语言&#xff0c;拼接字符串的方式有…

pycharm基本使用(常用快捷键)

0.下载 pycharm官网下载 选择合适的版本&#xff0c;本文以2024.1为例 1.简单应用 常用快捷键 ctrlD 复制当前行 ctrlY 删除当前行 ctrlX 剪切当前行&#xff08;可用作删除&#xff0c;更顺手&#xff09; shift↑ 选中多行ctrlshiftF10 运行 shiftF9 调试ctrl/ 注释当前…

数据结构入门:探索数据结构第一步

0.引言 在我们的日常生活中&#xff0c;经常需要管理大量的数据&#xff0c;就譬如学校中有好几千个学生&#xff0c;中国有十三亿人口&#xff0c;对于那么多的数据进行查找、插入、排序等操作就会比较慢。人们为了解决这些问题&#xff0c;提高对数据的管理效率&#xff0c;…

HTML实现进度条/加载框模版

HTML加载 一、环形加载 1二、环形加载 2三、波形加载四、百分比环形五、进度条 一、环形加载 1 <div class"loader"></div>.loader {border: 16px solid #f3f3f3;border-radius: 50%;border-top: 16px solid #3498db;width: 120px;height: 120px;-webki…

JavaScript 在浏览器和 Node.js 里的运行流程

浏览器中的 JavaScript 运行流程 加载与解析 HTML&#xff1a;浏览器首先加载 HTML 文档&#xff0c;并开始解析构建 DOM 树。这一步骤包括下载并解析所有的 HTML 标记。 发现 JavaScript 资源&#xff1a;当浏览器遇到 <script> 标签时&#xff0c;解析过程会暂停并开始…

docker被封禁,怎么拉取镜像,打包所有镜像

因为docker被国内封禁了&#xff0c;所以我把电脑上之前的镜像全部打包出来了 你们也可以打包&#xff0c;我提供一个脚本&#xff0c;你运行即可 export_docker.sh #!/bin/bash# 导出目录 EXPORT_DIR"docker_images_backup" mkdir -p "$EXPORT_DIR"# 获…

Calibre版图验证工具调用_笔记

Siemens EDA Calibre版图验证工具调用 采用Cadence Virtuoso Layout Editor直接调用Siemens EDA Calibre工具需要进行文件设置&#xff0c; 在用户的根目录下&#xff0c;找到.cdsinit文件&#xff0c; 在文件的结尾处添加以下语句即可&#xff0c;其中&#xff0c;calibre.skl…

vue3 computed 返回计算内容

const ItemPercent computed(() > {return (item: any) > {const num item.polishTaskList.filter((row: any) > row.carryOutState 1).lengthreturn (num / item.polishTaskList.length) * 100}}) 我现在有一个列表 列表中有每一项 根据每一项的数据 计算 或显…

Java 中常校验时间格式的方法

前言&#xff1a; 在实际项目开发中&#xff0c;跟时间参数打交道是必不可少的&#xff0c;为了保证程序的安全性、健壮性&#xff0c;一般都会对参数进行校验&#xff0c;其他类型的参数校验很好实现&#xff0c;那你知道时间参数的是怎么校验的吗&#xff1f;估计部分朋友在…

电表抄表软件是什么?

一、电表抄表软件的概念和作用 电表抄表软件&#xff0c;是一种致力于电力企业定制的数字化工具&#xff0c;用以远程控制搜集、管理方法与分析电表数据信息。它取代了传统人工抄表方法&#xff0c;大大提高了工作效率&#xff0c;降低了人为失误&#xff0c;并且能实时监控系…

【html】简单网页模板源码

大家每一次在写网页的时候会不会因为布局而困扰今天就给大家带来一个我自己亲自编写的网页的基本的模板大家可以直接去利用&#xff0c;大家也可以利用自己的想法去做空间的美化和完善。 源码&#xff1a; html: <!DOCTYPE html> <html lang"zh"><…

flask基础3-蓝图-cookie-钩函数-flask上下文-异常处理

目录 一&#xff1a;蓝图 1.蓝图介绍 2.使用步骤 3.蓝图中的静态资源和模板 二.cookie和session 1.cookie 2.flask中操作cookie 3.session 4.session操作步骤 三.请求钩子 四.flask上下文 1.介绍 2.请求上下文&#xff1a; 3.应用上下文 3.g对象 五&#xff1a;…

【Linux】进程控制2——进程等待(waitwaitpid)

1. 进程等待必要性 我们知道&#xff0c;子进程退出&#xff0c;父进程如果不管不顾&#xff0c;就可能造成"僵尸进程”的问题&#xff0c;进而造成内存泄漏。另外&#xff0c;进程一旦变成僵尸状态&#xff0c;那就刀枪不入&#xff0c;“杀人不眨眼”的kill -9 也无能为…

香港户口需要什么条件?有学历要求吗?最新香港落户途径详解!

香港户口需要什么条件&#xff1f;有学历要求吗&#xff1f;最新香港落户途径详解&#xff01; 由于香港放开“落户”窗口&#xff0c;想去香港发展或者想拿香港身份的朋友都想抓住这个机会赶紧申请。 只是&#xff0c;香港户口办理是有条件的&#xff0c;而且有学历要求&…

2024年上海高考作文题目(ChatGPT版)

一、2024年6月7日上海高考作文题目 生活中&#xff0c;人们常用认可度判别事物&#xff0c;区分高下。请写一篇文章&#xff0c;谈谈你对“认可度”的认识和思考。 要求&#xff1a;&#xff08;1&#xff09;自拟题目&#xff1b;&#xff08;2&#xff09;不少于800字。 二、…

Judging LLM-as-a-Judge with MT-Bench and Chatbot Arena阅读笔记

使用 MT-Bench 和 Chatbot Arena 评估 LLM 作为评审的效果 Lianmin Zheng1∗ Wei-Lin Chiang1∗ Ying Sheng4∗ Siyuan Zhuang1 Zhanghao Wu1 Yonghao Zhuang3 Zi Lin2 Zhuohan Li1 Dacheng Li13 Eric P. Xing35 Hao Zhang12 Joseph E. Gonzalez1 Ion Stoica1 1 UC Berkele…

VScode中连接并使用docker容器

前提条件&#xff1a; 1.在windows下安装Docker Desktop(方法可见下面的教程) Docker Desktop 安装使用教程-CSDN博客 2.在vscode安装3个必备的插件 3.先在ubuntu中把docker构建然后运行 4.打开vscode&#xff0c;按下图顺序操作 调试好之后上传到git上&#xff0c;然后后面…

《人人都是产品经理》笔记1:什么是产品?怎么入行?

《人人都是产品经理》笔记1&#xff1a;什么是产品&#xff1f;怎么入行&#xff1f; 产品是什么&#xff1f;产品经理、产品管理&#xff1f;真的想做产品经理吗&#xff1f;全书结构示意图 从写这篇文章开始&#xff0c;是个人第二次对该书进行阅读&#xff0c;在此进行个人的…