标签：index arr Vue 预览 show imgList 全屏 图片

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

我的项目中，微信公众号上的图片和其他内容是来自后台接口，（管理平台上用百度编辑器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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。