小程序 rich-text中图片点击放大与自适应大小问题
图片点击放大
data:{
imgarr:[]
}
let imgarr = [];
let regex = new RegExp(/<img.*?(?:>|\/>)/gi);
let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
let arrsImg = obj.info.match(regex);
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],
urls: this.data.imgarr
})
},
<view class="mdl-xq">
<rich-text nodes="{{ goodObj.info }}" space="ensp" catchtap="catchImage"></rich-text>
</view>
自适应大小
obj.info = obj.info.replace(/<img/gi, '<img class="fwb-img"')
.replace(/<section/g, '<div')
.replace(/\/section>/g, '\div>');
<view class="mdl-xq">
<rich-text nodes="{{ goodObj.info }}" space="ensp"></rich-text>
</view>
.mdl-xq {
display: flex;
flex-direction: column;
padding:20rpx;
}
.fwb-img {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
display: block
}