.wxml
<view wx:if="{
{word}}" wx:for="{
{word}}" wx:key="index" class="word">
<view class='word_title'>{
{
item.title}}</view>
<image src='{
{item.image}}' mode="heightFix" class="word_image" bindtap='bandBigImage' data-current="{
{item.image}}"
data-index="{
{index}}"></image>
<view class="contentbox px-3">
<button bindtap="wordAnswer" data-index='{
{index}}' style="background: #e6c779;width: 246rpx;" class="bth">
<rich-text style="color:black;font-weight: 100;">点击查看答案 </rich-text>
</button>
<view class="contentbox px-3" wx:if="{
{item.nav}}">
<view style="height: 30rpx;"></view>
//富文本
<view class='text' wx:if="{
{item.answer}}" bindtap="toBig" data-answer="{
{item.answer}}">
<rich-text nodes="{
{item.answer}}" space="emsp"></rich-text>
</view>
//富文本
<view wx:else style="text-align: center;color: red;">该题目没有答案</view>
</view>
</view>
</view>
.js
getHistoryData() {
let {
page,
limit,
nomore
} = this.data;
if (page == 1) {
wx.showLoading({
title: '加载中',
})
}
if (nomore) {
return;
}
reqHistoryData({
topic_id: this.data.topic_id,
token: app.token(),
limit,
page,
}).then(res => {
const list = res.data.data.word;
const word = this.data.word;
list.forEach(function(item, index) {
item['nav'] = false;
let wxwidth = wx.getSystemInfoSync().windowwidth;
//富文本实现适应手机屏幕
if(item['answer']){
item['answer'] = item['answer'].replace(/\<img/gi,'<img style="width:100%;vertical-align:middle;"')
}
})
//富文本实现适应手机屏幕
this.setData({
word: [...word, ...list],
page: page + 1,
})
if (this.data.word.length == 0) {
this.setData({
showNullImage: true
})
}
if (list.length < limit) {
this.setData({
nomore: true,
})
}
wx.hideLoading()
})
},
//实现放大图片
toBig(e){
//富文本图片放大
var nodes = e.currentTarget.dataset.answer;
if (nodes.indexOf("src") >= 0) {
//正则匹配所有图片路径
var imgs = [];
nodes = nodes.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
imgs.push(capture);
console.log(imgs);
return '';
});
//清除图片后正则匹配清除所有p标签
nodes = nodes.replace(/<p(([\s\S])*?)<\/p>/g, function (match, capture){
return '';
});
}
var index = 0;
let current = imgs[index];
wx.previewImage({
current, // 当前显示图片的http链接
urls: imgs // 需要预览的图片http链接列表
});
}
//实现放大图片
效果图: