html photoswipe原理,H5使用PhotoSwipe预览图片

如果在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的容器。