标签：info obj text data 点击 let rich imgarr 图片

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>

效果：

标签：info,obj,text,data,点击,let,rich,imgarr,图片
来源： https://blog.csdn.net/u014678583/article/details/118606587

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