其他分享
首页 > 其他分享> > Vue移动端图片放大预览(可全屏,可滑动)

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
      })
   },

 

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

效果查看:

 

标签:index,arr,Vue,预览,show,imgList,全屏,图片
来源: https://www.cnblogs.com/wangdashi/p/16289698.html