讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
当前位置：首页 > web前端 > Vue.js >

正文

0

0

利用v-viewer结合vue 预览相册

铁手

铁手

发布时间：2021-05-29 00:09:24

|

4763人浏览过

|

来源于php中文网

原创

最近有一个需求是搭建相册管理系统，需要按相册展示图片，于是前端用vue,后端用tp5搭了一个小型的系统。

前端用到了v-viewer组件，有个问题碰到了在此记录一下；就是在预览图片的时候由于图片是动态加载的，预览的时候就会动态刷新默认跳到第一张图片上，解决的办法就是预览的时候阻止重新更新

具体步骤说明如下：

1、首先创建一个vue项目，利用vue脚手架创建（不懂的可以查看官方文档，这边不在说明）

2、在页面引入v-viewer组件

立即学习“前端免费学习笔记（深入）”；

import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer/src/component.vue'

3、调用方式，在模板文件中编写如下代码

Lessie AI
Lessie AI

一款定位为「People Search AI Agent」的AI搜索智能体

下载

images传入数组，每一项是图片的路径URL

4、只要后端接口拿到数据后，把图片URL数组赋给images即可，如果是一次性获取图片没有问题。如果图片数量很多的情况，通常后端都是按分页来获取图片，这时就要等图片全部加载完成预览才不会出现跳转到第一张的情况；为了解决这个问题，就要看组件内部怎么处理的，查看代码后发现只需要把监测images的变化动态更新注释掉即可；

  watch: {
    images () {
      // this.$nextTick(() => {
      //   this.onChange()
      // })
    },

然后在图片点击的时候在调用更新update方法即可。参考如下代码

 handleShow(index) {
    this.$viewer.update()
    this.$viewer.view(index) // 预览当前图片
}

总结：在碰到具体问题需要具体分析，有时候需要更改源代码才能解决问题；（有问题欢迎咨询探讨，申请时备注一下哦。微信号：13163923579）

相关文章

Vue的functional组件有哪些特点和限制？

Vue的指令（directive）是如何注册和使用的？

Vue.js实现旅游网站的页面布局和交互效果

学习Vue.js过程中常见的误区和解决方法

Vue中如何实现父子组件之间的通信？

相关标签:

接口

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：什么是Vuex？Vuex 4初学者指南 下一篇：浅谈Vue项目中使用npm安装bootstrap和jquery

作者最新文章

利用v-viewer结合vue 预览相册

2021-05-29 00:09

百度小程序富文本解析工具bdParse的使用

2021-07-17 22:38

关于electron-vue图片压缩

2021-07-19 19:20

linux定时执行php启动任务脚本（步骤分析）

2022-08-12 20:53

热门AI工具

更多
DeepSeek

DeepSeek

幻方量化公司旗下的开源大模型平台

AI大模型

开放平台
豆包大模型

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI大模型
通义千问

通义千问

阿里巴巴推出的全能AI助手

AI大模型
腾讯元宝

腾讯元宝

腾讯混元平台推出的AI助手

文档处理

Excel 表格
文心一言

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI大模型

中文写作
讯飞写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

中文写作

写作工具
即梦AI

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

图画生成
ChatGPT

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI大模型

中文写作
智谱清言 - 免费全能的AI助手

智谱清言 - 免费全能的AI助手

智谱清言 - 免费全能的AI助手

AI大模型

PDF 文档

相关专题

更多
硬盘接口类型介绍
硬盘接口类型介绍

硬盘接口类型有IDE、SATA、SCSI、Fibre Channel、USB、eSATA、mSATA、PCIe等等。详细介绍：1、IDE接口是一种并行接口，主要用于连接硬盘和光驱等设备，它主要有两种类型：ATA和ATAPI，IDE接口已经逐渐被SATA接口；2、SATA接口是一种串行接口，相较于IDE接口，它具有更高的传输速度、更低的功耗和更小的体积；3、SCSI接口等等。

1025

2023.10.19

PHP接口编写教程
PHP接口编写教程

本专题整合了PHP接口编写教程，阅读专题下面的文章了解更多详细内容。

66

2025.10.17

php8.4实现接口限流的教程
php8.4实现接口限流的教程

PHP8.4本身不内置限流功能，需借助Redis（令牌桶）或Swoole（漏桶）实现；文件锁因I/O瓶颈、无跨机共享、秒级精度等缺陷不适用高并发场景。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。

452

2025.12.29

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容，阅读专题下面的文章了解更多详细内容。

10

2026.01.19

Java JVM 原理与性能调优实战
Java JVM 原理与性能调优实战

本专题系统讲解 Java 虚拟机（JVM）的核心工作原理与性能调优方法，包括 JVM 内存结构、对象创建与回收流程、垃圾回收器（Serial、CMS、G1、ZGC）对比分析、常见内存泄漏与性能瓶颈排查，以及 JVM 参数调优与监控工具（jstat、jmap、jvisualvm）的实战使用。通过真实案例，帮助学习者掌握 Java 应用在生产环境中的性能分析与优化能力。

9

2026.01.20

PS使用蒙版相关教程
PS使用蒙版相关教程

本专题整合了ps使用蒙版相关教程，阅读专题下面的文章了解更多详细内容。

59

2026.01.19

java用途介绍
java用途介绍

本专题整合了java用途功能相关介绍，阅读专题下面的文章了解更多详细内容。

82

2026.01.19

java输出数组相关教程
java输出数组相关教程

本专题整合了java输出数组相关教程，阅读专题下面的文章了解更多详细内容。

38

2026.01.19

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容，阅读专题下面的文章了解更多详细内容。

10

2026.01.19

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

相关下载

更多
php商城系统
淘源码商城PHP淘宝查信誉
PHP房产程序[BBWPS]
PHP简约自动发卡平台个人版
ERMEB域名PHP离线网络授权系统
Difeye-敏捷的轻量级PHP框架
大泉州汽车网PHP整站程序

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ReactJS中文基础视频教程
ReactJS中文基础视频教程

共14课时 | 3.1万人学习

React.JS中文基础视频教程
React.JS中文基础视频教程

共14课时 | 3万人学习

React 基础精讲视频教程
React 基础精讲视频教程

共14课时 | 3.3万人学习

最新文章

更多
Vue的双向绑定是通过哪两个核心机制实现的？
Vue 2 和 Vue 3 在按需引入上有什么差异？
如何用Vue.js开发一个租房信息平台
Vue的动态组件是如何通过is属性实现的？
Vue.js开发教育类应用的功能模块设计
怎样通过开源项目学习Vue.js
Vue的组件模板编译过程分为哪几步？
学习Vue.js的优质在线课程推荐
Vue的v-slot指令在具名插槽中如何使用？
Vue.js实现音乐播放器的代码示例
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部