最近有一個需求是搭建相簿管理系統,需要按相簿展示圖片,於是前端用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中文網其他相關文章!