最近在寫微信小程序的時候叉弦，后臺返回的是富文本數(shù)據(jù)，開始想著處理html標簽迫筑，后來發(fā)現(xiàn)可以使用rich-text標簽村刨，如下：
.wxml
<view class="hotspot-info-content">
<rich-text nodes="{{contentInfo}}" class="hotspot-rich-text"></rich-text>
</view>
- 處理圖片的代碼
contentInfo: content.replace('<img ', '<img style="max-width:100%;height:auto;display:block;margin:10px 0;"')
.js
wx.request({
url: '接口地址',
data: {
topicId: _id
},
header: {
'content-type': 'application/json'
},
method: 'GET',
responseType: 'text',
success(res) {
console.log(res);
if (res.data.code === 0) {
//返回的富文本數(shù)據(jù)
var content = res.data.data.content;
that.setData({
//處理圖片自適應(yīng)問題
/**
* 此代碼段處理目的為，匹配富文本代碼中的 <img> 標簽栈幸，并將其圖片的寬度修改為適應(yīng)屏幕
* max-width:100% --- 圖片寬度加以限制愤估，避免超出屏幕
* height:auto --- 高度自適應(yīng)
* display:block
*其他樣式可根據(jù)自己需要進行添加
*/
contentInfo: content.replace('<img ', '<img style="max-width:100%;height:auto;display:block;margin:10px 0;"')
})
} else {
console.log('數(shù)據(jù)加載失敗')
wx.showToast({
title: res.data.msg,
duration: 2000
})
}
},
})
-
截圖如下：
文章詳情截圖
