关于前端:微信原生小程序中富文本组件richtext如何实现图片预览wxpreviewImage

有需要后端返回的一个动态页面是一个富文本,应用原生组件rich-text之后,即可渲染到页面,当渲染到页面之后,含有img图片如何实现点击预览?

思路:应用正则把图片的url进行剖离进去,push进一个数组中,点击富文本组件,运行wx.previewImage办法。

wxml:

<rich-text nodes="{{富文本}}" catchtap="richTextClick"></rich-text>

点击事件:

// 富文本点击事件
  richTextClick() {
    // 富文本
    const richContent = this.data.content;
    // 判断含有图片
    if (richContent.indexOf("src") >= 0) {
      const imgs = [];
      richContent.replace(/]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
        imgs.push(capture);
      })
      
      wx.previewImage({
        current: imgs[0], // 以后显示图片的http链接
        urls: imgs
      })
    }
  },

有余&Tip:
1、点击事件是加在富文本组件rich-text上的,渲染到页面也是一样,并不会把富文本中的dom渲染在页面中;
2、在预览图片时,无奈晓得用户点击的以后是哪个图片。所以,含有多张图片时,预览始终会从第一张图片开始,可左右滑动。

相干文档:
rich-text
wx.previewImage

心愿大佬有更好的解决方案,私信或者评论我,万分感激!

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据