如果在h5上想要實現類似app上的點擊預覽圖片并且可以放大縮小這種功能，確實比在app上實現起來更為麻煩，但是有了PhotoSwipe(https://github.com/dimsemenov/PhotoSwipe)這個三方庫，實現起來就要方便簡單的多了。

我在的前端項目使用的是vue-cli搭建的框架，所以在使用PhotoSwipe的時候，只需要NPM或者CNPM管理就可以了：

npm install photoswipe

當在項目中安裝了photoswipe之后，只需要在對應的.vue文件中引入即可進行使用：

import PhotoSwipe from 'photoswipe/dist/photoswipe'

import UI from 'photoswipe/dist/photoswipe-ui-default'

import 'photoswipe/dist/photoswipe.css'

import 'photoswipe/dist/default-skin/default-skin.css'

當然，這個時候，只是把photoswipe引入了template里面，還沒有開始正式使用，接下來，只需要在項目的標簽的唯一子標簽

現在，photoswip基本的需要的都已經有了，接下來，就是給你需要點擊放大預覽的圖片或標簽綁定預覽的事件，其中事件的代碼如下：

imagePreview (currentIndex, imageArray) {

var items = []

imageArray((item, index, array) => {

items.push({

src: item.picUrl,

w: item.width,

h: item.height

})

})

var options = {

index: currentIndex

}

var pswpElement = this.$refs.pswb

var gallery = new PhotoSwipe(pswpElement, UI, items, options)

gallery.init()

}

可能大家在這里會發現，使用photoswipe預覽圖片，一個不好的東西就是，你自己的圖片數組必須要保證有圖片的大小即長款，如果說有負責管理圖片素材的后臺，可能會比較方便一些，在上傳圖片的之后即可以完成對圖片素材資源的長款讀取和保存；如果是沒有的話，確實比較麻煩。

當然，最后一步，就是就是給需要點擊的圖片標簽使用vue的@click事件，綁定imagePreview(currentIndex, imageArray)這個事件。

注意：本項目由于使用的是vue進行管理，所以在我的標簽

這個地方的時候，已經使用先創建了pswb標簽了，所以，在我的imagePreview事件中，我使用var pswpElement = this.$refs.pswb直接就拿到了這個標簽，并且指定使用這個標簽，作為photoswipe的容器。

總結

以上是生活随笔為你收集整理的html photoswipe原理,H5使用PhotoSwipe预览图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。