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) =