小程序 rich-text中图片点击放大与自适应大小问题

18 篇文章 1 订阅
2 篇文章 0 订阅
这篇博客介绍了如何处理富文本中的图片,使其自适应大小并消除间隔,以及实现详情页图片点击后预览的功能。通过正则表达式匹配图片标签,并设置样式确保图片全屏显示。同时,解析图片源并存储,用于点击事件触发预览。
摘要由CSDN通过智能技术生成

1、图片自适应大小

// obj.info 后台返回的富文本数据
 
obj.info = obj.info.replace(/<img/gi, '<img class="fwb-img"')
          .replace(/<section/g, '<div')
          .replace(/\/section>/g, '\div>');


// html:

<view class="mdl-xq">
  <rich-text nodes="{{ goodObj.info }}" space="ensp"></rich-text>
</view>

// css:

.mdl-xq {
  display: flex; // 这两行代码主要解决图片之间有白色间隔的问题
  flex-direction: column; // 这两行代码主要解决图片之间有白色间隔的问题
  padding:20rpx;
}

.fwb-img {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  display: block
}

2、详情页图片点击放大

// js

data:{
    imgarr:[]
}
// 主要代码
let imgarr = [];
let regex = new RegExp(/<img.*?(?:>|\/>)/gi); // 匹配所有图片
let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; // 匹配src图片
let arrsImg = obj.info.match(regex); // obj.info 后台返回的富文本数据
for (let a = 0; a < arrsImg.length; a++) {
    let srcs = arrsImg[a].match(srcReg);
    imgarr.push(srcs[1])
}
this.setData({
    imgarr
})

// 点击放大预览图片函数
catchImage(e){
    console.log(this.data.imgarr);
    wx.previewImage({
      current: this.data.imgarr[0], // 当前显示图片的http链接
      urls: this.data.imgarr // 需要预览的图片http链接列表
    })
  },

// html

<view class="mdl-xq">
  <rich-text nodes="{{ goodObj.info }}" space="ensp" catchtap="catchImage"></rich-text>
</view>

效果:

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

余温无痕

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值