数据图册页面(左边一列图片缩略图,右边展示图片大图)

最近要写这么一个页面,左侧一列图片缩略图,点击左侧缩略图后有选中效果,然后右侧展示图片原图,还能够左右翻页查看。
最后写了一个demo出来,demo还不是很完善,需要自己修改,后面我也给出了修改建议。

文章目录

      • demo的最终效果:
      • 修改说明
      • 页面源代码

demo的最终效果:

在这里插入图片描述

我这里数据是写死的:
url是获取的本地图片,测试时候可以直接这样写。
到时候有数据时,直接把url封装到这个数组结构中就可以了。
在这里插入图片描述

修改说明

这里说一下我对这个demo的修改,供大家参考:
1、我这里在左侧加了滚动条,查看缩略图列表,用的是el的这个组件<el-scrollbar>

2、右侧大图我又加了点击放大查看,用的是el的<el-image>的:preview-src-list属性,给这个属性绑定一个url数组,可以把这个对象数组的url属性封装到一个url数组中。

可以参考elementui官网的大图预览:
https://element.eleme.io/#/zh-CN/component/image

3、这个样式是左侧缩略图选中时的灰色选中效果,可以自行修改颜色。
.thumbnail.active {
background-color: #ccc;
}
4、可以把右侧大图的宽度定死,这样图片跳转按钮就不会来回跳了
5、还可以把跳转按钮做成循环的,这样到最后一页再跳转的时候就会直接到第一页。
循环的写法:
就是多加一个else判断

// 上一张图片prevImage() {if (this.currentIndex > 0) {this.currentIndex--;} else {this.currentIndex = this.images.length - 1;}},// 下一张图片nextImage() {if (this.currentIndex < this.images.length - 1) {this.currentIndex++;} else {this.currentIndex = 0;}},

页面源代码

<template><!-- 图片展示组件 --><div class="image-gallery"><!-- 缩略图列表 --><div class="thumbnail-list"><divv-for="(image, index) in images":key="index":class="['thumbnail', { active: index === currentIndex }]"@click="setCurrentIndex(index)"><img :src="image.url" alt="Thumbnail" /><div class="image-name">{{ image.name }}</div> <!-- 显示图片名称 --></div></div><!-- 图片展示器 --><div class="image-viewer"><div class="image-container"><!-- 左翻页箭头 --><div class="arrow left" @click="prevImage">&#8249;</div><!--        &lt;!&ndash; 当前选中的图片 &ndash;&gt;-->
<!--        <img :src="currentImage.url" alt="Full Size Image" />--><!-- 当前选中的图片 --><div class="image-wrapper"><div class="image-name">{{ currentImage.name }}</div> <!-- 显示图片名称 --><div class="image-name">{{ currentImage.summary }}</div> <!-- 显示图片名称 --><img :src="currentImage.url" alt="Full Size Image" /></div><!-- 右翻页箭头 --><div class="arrow right" @click="nextImage">&#8250;</div></div></div></div>
</template><script>export default {data() {return {// 图片对象数组,包含链接和名称images: [{ url: require('@/assets/01.png'), name: '图片1' ,summary:'图片介绍'},{ url: require('@/assets/02.png'), name: '图片2' ,summary:'图片介绍'},{ url: require('@/assets/03.png'), name: '图片3' ,summary:'图片介绍'},],// 当前选中的图片索引,初始值为 0currentIndex: 0,};},computed: {// 计算属性,返回当前选中的图片对象currentImage() {return this.images[this.currentIndex];},},methods: {// 设置当前选中的图片索引setCurrentIndex(index) {this.currentIndex = index;},// 上一张图片prevImage() {if (this.currentIndex > 0) {this.currentIndex--;}},// 下一张图片nextImage() {if (this.currentIndex < this.images.length - 1) {this.currentIndex++;}},},};
</script><style scoped>.image-gallery {display: flex;height: 100vh;}.thumbnail-list {width: 200px;background-color: #f5f5f5;overflow-y: auto;}.thumbnail {padding: 10px;cursor: pointer;border-bottom: 1px solid #ccc;}.thumbnail img {width: 100%;}.thumbnail.active {background-color: #ccc;}.image-viewer {flex: 1;display: flex;align-items: center;justify-content: center;}.image-container {position: relative;}.arrow {position: absolute;top: 50%;font-size: 24px;color: #fff;cursor: pointer;user-select: none;background-color: rgba(0, 0, 0, 0.3);padding: 4px 8px;}.arrow.left {left: 10px;}.arrow.right {right: 10px;}img {max-width: 100%;max-height: 100%;}.image-name {margin-top: 5px; /* 图片名称与缩略图之间的上边距 */text-align: center; /* 居中显示图片名称 */}/*小的图片查看器样式*/.image-wrapper {/*      position: relative;*/margin-top: 40px;}
</style>

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

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

相关文章

如何处理前端SEO(搜索引擎优化)?

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

使用OkHttp和Java来下载

以下是一个使用OkHttp和Java来下载内容的下载器程序&#xff0c;同时使用了jshk.com.cn/get_proxy来获取代理服务器。请注意&#xff0c;为了简化代码&#xff0c;我们将忽略一些异常处理和安全性检查。 import java.io.File;import java.io.FileOutputStream;import java.io.I…

块状数据结构学习笔记

分块 分块的思想和珂朵莉树很类似&#xff0c;就是把原序列分成若干个块&#xff0c;对块进行操作的奇妙思想。复杂度通常带根号。分块的块长也有讲究&#xff0c;通常对于大小为 n n n 的数组&#xff0c;取距离 n \sqrt n n ​ 最近的 2 2 2 的幂数或直接取 n \sqrt n n…

第一节——vue安装+前端工程化

作者&#xff1a;尤雨溪 官网&#xff1a;简介 | Vue.js 脚手架文档 创建一个项目 | Vue CLI 一、概念&#xff08;了解&#xff09; 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是&#xff0c;Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层&…

在Kubernetes(k8s)上部署整个SpringCloud微服务应用

视频教程地址&#xff1a;https://www.bilibili.com/video/BV1Xh4y1q7aW/ 文章目录 项目准备打成使用Docker打成镜像准备Docker仓库打包项目为Docker镜像 部署应用到k8s创建nfs挂载目录创建一些基本资源创建命名空间创建拉取镜像的secret创建java运行环境的profile 部署mysql创…

c++_learning-c++标准库STL和boost库

c的标准库 STL标准库&#xff1a;#include<iostream>&#xff1a;#include<iomanip>&#xff1a;#include<cstdlib>&#xff1a;#include<cmath>&#xff1a;#include<tuple>&#xff1a;利用可变参数模板&#xff0c;借助“递归继承”或“递归组…

面试经典150题——Day16

文章目录 一、题目二、题解 一、题目 42. Trapping Rain Water Given n non-negative integers representing an elevation map where the width of each bar is 1, compute how much water it can trap after raining. Example 1: Input: height [0,1,0,2,1,0,1,3,2,1,2,…

vue的v-for中循环修改变量(this.xxx)的给子组件传值覆盖重复的问题

遇到问题 使用v-for&#xff0c;其中需要根据不同的item修改某个变量(this.xxx)&#xff0c;然后向子组件中传值&#xff0c;但是发现传到子组件中的值却全是重复一样的&#xff1a; 我们循环qsList&#xff0c;其中<qs-form>是我自定义的一个组件&#xff0c;想向该子组…

Godot 官方2D C#重构(1):雪花碰撞

前言 Godot 官方 教程 Godot 2d 官方案例C#重构 专栏 Godot 2d 重构 github地址 实现效果 难点介绍 Godot GDScript和C# 对应关系大部分靠猜 文件导入 资源地址&#xff1a;默认为res://开头2D贴图导入类型&#xff1a;Texture2D public Texture2D Bullet_Image new Textu…

【通信、算法、旅游、人工智能、图像处理、机械、医疗】EI会议(2023)

1. EIECT 2023 (2023 3rd International Conference on Electronic Information Engineering and Computer Technology) 地点&#xff1a;中国深圳 时间&#xff1a;2023年11月17 - 19日 EI检索&#xff1a;是官方网站 2. AIAC 2023 (The 2023 International Conference on Ar…

超全整理,服务端性能测试-tomcat部署项目/查看日志(细致)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 tomcat部署单项目…

TechSmith Camtasia Studio 23.3.2.49471 Crack

全新的Camtasia 2023.2 Camtasia Studio是专业的屏幕录像和视频编辑的软件套装。软件提供了强大的屏幕录像&#xff08;Camtasia Recorder&#xff09;、视频的剪辑和编辑&#xff08;Camtasia Studio&#xff09;、视频菜单制作&#xff08;Camtasia MenuMaker&#xff09;、视…

Spring framework :基于 jdk 动态代理实现连接池复用

前言 在数据库开发中&#xff0c;连接池是一种重要的技术手段&#xff0c;它可以提高数据库连接的复用性和性能。连接池的原理是在应用启动时创建一定数量的数据库连接&#xff0c;并将这些连接保存在一个池中&#xff0c;应用程序需要数据库连接时&#xff0c;从连接池中获取…

Oracle数据库修改序列,Oracle中的主键值和序列中的值对应不上时的处理方式

select max(stu.id) maxid from student stu; //查询student表中id的最大值select XXX_SEQ.nextval from dual; //查询student表中id对应序列XXX_SEQ的下一个值alter sequence XXX_SEQ increment by 1000; //将序列XXX_SEQ步长改为1000&#xff0c;对应 student表中id的最大值s…

全波形反演培训的思考与总结

一. InversionNet: 最简单的端到端DL_FWI 1. 网络结构&#xff1a; 图1 构建了一个具有编码器-解码器结构的卷积神经网络&#xff0c;根据地震波动数据模拟地下速度结构。编码器主要由卷积层构建&#xff0c;它从输入地震数据中提取高级特征并将其压缩为单个高维向量。解码器然…

推荐《机动战士高达SEED DESTINY》

《机动战士高达SEED DESTINY》是《机动战士高达SEED》的续集&#xff0c;于日本时间2004年10月9日—2005年10月1日每周六下午六点在每日放送、TBS电视台系列电视台播出&#xff0c;全50话。 [1] 台湾版权由博英社取得&#xff0c;并于2005年10月8日起由中国电视公司在每周六播…

面试题-React(十四):什么是高阶组件(HOC)及其作用

一、高阶组件的概念 高阶组件&#xff08;HOC&#xff09;是一种函数&#xff0c;接受一个组件作为参数&#xff0c;并返回一个新的组件。这个新的组件具有一些增强的特性或功能。简而言之&#xff0c;高阶组件就是用来“包装”其他组件的函数。 二、高阶组件的作用 高阶组件…

float、double类型的转化和判断为零问题

1、将字符串转化为float、double 浮点数在内存中的存储机制和整形数据不同&#xff0c;有舍入误差&#xff0c;在计算机中用近似表示任意某个实数。具体来说&#xff0c;这个数由一个整数或定点数&#xff08;即尾数&#xff09;乘以某个基数&#xff08;计算机中通常是2&…

uni-app:js实现数组中的相关处理

一、查询数组中&#xff0c;某一项中的某个数据为指定值的项&#xff08;find() 方法&#xff09; 使用分析 使用数组的 find() 方法来查询 id 为 0 的那一项数据。这个方法会返回满足条件的第一个元素&#xff0c;如果找不到符合条件的元素&#xff0c;则返回 undefined。使用…

操作系统【OS】微内核

基本概念 微内核结构将操作系统划分为两大部分&#xff1a;微内核多个服务器微内核包含&#xff1a; 与硬件处理紧密相关的部分一些较基本的功能客户和服务器间的通信客户与服务器之间是借助微内核提供的消息传递机制来实现交互的 基本功能 进程管理 进程的通信、切换、调度…