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里面，还没有开始正式使用，接下来，只需要在项目的<template></template>标签的唯一子标签<div></div>中引入如下代码即可：

<template>
  <div>
    
    <div class="pswp" ref="pswb" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="pswp__bg"></div>
      <div class="pswp__scroll-wrap">
        <div class="pswp__container">
          <div class="pswp__item"></div>
          <div class="pswp__item"></div>
          <div class="pswp__item"></div>
        </div>
        <div class="pswp__ui pswp__ui--hidden">
          <div class="pswp__top-bar">
            <div class="pswp__counter"></div>
            <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
            <div class="pswp__preloader">
              <div class="pswp__preloader__icn">
                <div class="pswp__preloader__cut">
                  <div class="pswp__preloader__donut"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
            <div class="pswp__share-tooltip"></div>
          </div>
          <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
          </button>
          <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
          </button>
          <div class="pswp__caption">
            <div class="pswp__caption__center"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</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进行管理，所以在我的标签<div class="pswp" ref="pswb">这个地方的时候，已经使用先创建了pswb标签了，所以，在我的imagePreview事件中，我使用var pswpElement = this.$refs.pswb直接就拿到了这个标签，并且指定使用这个标签，作为photoswipe的容器。