Vue移动端图片放大预览（可全屏，可滑动）

需求：微信公众号上的图片点击可以实现放大预览

我的项目中，微信公众号上的图片和其他内容是来自后台接口，（管理平台上用百度编辑器Editor添加的）

 

如何实现：

图片是根据接口渲染出来的，那么就先找到这些图片，然后再给图片绑定click事件，点击的时候进行预览

 

实现过程：

最开始我想到的是vant的ImagePreview图片预览组件，

官网是这么描述的

 

一、给富文本框里的每个img绑定click事件

　　给外层标签加个class名

    editorImgs() {
      this.imgList = document.getElementsByClassName("editor-desc")[0].getElementsByTagName("img");
      console.log(this.imgList.length);
      let arr = []
      for (let i = 0; i < this.imgList.length; i++) {
        arr.push(this.imgList[i].src)
        this.imgList[i].setAttribute("class", "preview-img");
        this.imgList[i].addEventListener("click", (e) => {
          this.show(arr,i);
        });
      }
    },

　　

二、点击图片获取打开相应图片预览的方法

   show(arr,index) {
      ImagePreview({
        images: arr,
        startPosition: index
      })
    },

 

这里有个小坑，执行this.editorImgs()方法时，如果放到mounted 里面， this.imgList.length的长度是0，

所以当进入详情页面时，放到请求详情接口下面，用$nextTick

this.$nextTick(() => {
     this.editorImgs()
})

　　

功能是实现了，也能实现图片预览了，但是图片过大过长时，能放大但是滑动不了，效果不太理想，就想找下看是否还有更好的解决办法

偶然间在微信公众号文章里看到有图片，放大能实现全屏预览效果　　

先下载weixin-js-sdk插件，然后引入

import wx from 'weixin-js-sdk'

　　

把上面的show方法改下：

  show(arr,index) {
      wx.previewImage({
        current: arr[index],
        urls: arr
      })
   },

 

构建后在移动端查看，实现了全屏预览功能。

效果查看：