最近有一個需求是搭建相簿管理系統，需要按相簿展示圖片，於是前端用vue,後端用tp5搭了一個小型的系統。
前端用到了v-viewer元件，有個問題碰到了在此記錄一下；就是在預覽圖片的時候由於圖片是動態載入的，預覽的時候就會動態刷新預設跳到第一張圖片上，解決的辦法就是預覽的時候阻止重新更新
具體步驟說明如下：
#1、首先創建一個vue項目，利用vue腳手架創建（不懂的可以查看官方文檔，這邊不在說明）
2、在頁面引入v-viewer元件
import 'viewerjs/dist/viewer.css' import Viewer from 'v-viewer/src/component.vue'
3、呼叫方式，在範本檔案中寫如下程式碼
<viewer :images="images" class="images clearfix" @inited="handleInited">
<template slot-scope="scope">
<img v-for="(src,i) in scope.images"
:src="src" :key="src" :class="'image ' + newClass[i] " @click="handleShow(i)">
</template>
</viewer>images傳入數組，每一項是圖片的路徑URL
4、只要後端介面拿到資料後，把圖片URL數組賦給images即可，如果是一次性取得圖片沒有問題。如果圖片數量很多的情況，通常後端都是按分頁來獲取圖片，這時就要等圖片全部加載完成預覽才不會出現跳轉到第一張的情況；為了解決這個問題，就要看組件內部怎麼處理的，查看程式碼後發現只需要把監測images的變化動態更新註解掉即可；
watch: {
images () {
// this.$nextTick(() => {
// this.onChange()
// })
},然後在圖片點擊的時候在呼叫更新update方法即可。參考以下程式碼
handleShow(index) {
this.$viewer.update()
this.$viewer.view(index) // 预览当前图片
}總結：在碰到具體問題需要具體分析，有時需要更改原始程式碼才能解決問題；（有問題歡迎諮詢探討，申請時備註一下哦。微訊號：13163923579）
以上是利用v-viewer結合vue 預覽相冊的詳細內容。更多資訊請關注PHP中文網其他相關文章！
