rich-text怎么实现图片预览
发布于 5 年前 作者 kchang 11503 次浏览 来自 问答

rich-text怎么实现图片预览

10 回复

在img里写bindtap也解析不出来,用wxparse有个问题,当富文本结构复杂的时候不可能一个个的赋变量,然后调用模板,循环套循环,单个模板要怎么实现了

previewImage?

那就是不能直接把这样的结构赋值给富文本组件显示了,要全部换成调用模版了。。

那有什么办法能把富文本组件中的图片放大显示啊?不然用户根本看不清楚啊。

你好,目前暂不支持此功能。

难度好大。。。

刚才的说法有些误导人,应该理解成封闭容器比较好,毕竟所有富文本标签都是按照规定的属性来的

可以把内容中图片提取出来  不过没法定位点击哪张图片预览

我也遇到这个问题了,想了个曲线救国的办法,点击组件 rich-text 然后拿到它的所有文本,以字符串截取的形式、用正则获取文本中所有的src路径,然后把这些路径存放在新数组中,直接调用图片预览,这是我写的练习,测试了可以,缺陷是不能按照点击图片的顺序预览,只能从头预览

test:function(e){

let that=this

console.log(“e”, this.data.htmlVal)

let arr=[];

let reg = /(?<=(src="))[^"]*?(?=")/ig

let allSrc = that.data.htmlVal.match(reg)

for (let i = 0; i<allSrc.length;i++){

console.log(“e000”, allSrc[i])

arr.push(allSrc[i])

that.setData({

imageArray:arr

})

}

wx.previewImage({

current: that.data.imageArray, // 当前显示图片的http链接  

urls: that.data.imageArray // 需要预览的图片http链接列表  

})

}

<rich-text nodes="{{htmlVal}}" bindtap=“test”></rich-text>

针对楼上的方案做简单的回答:

1、你可以把 rich-text 理解成一个容器,容器内的元素是没法添加事件的,容器内的元素是没法添加事件的,是没法添加事件的,也就是点击富文本,事件只是在 rich-text 上触发。

2、如果需求是需要点击图片预览,那你现在只是做了一半工作,剩下的工作就是把 nodes<Array>再转成微信小程序的template格式,例如你需要图片事件点击,那就要把数据转成image组件,实现类似这样的模板 https://github.com/icindy/wxParse/blob/master/wxParse/wxParse.wxml#L21。

回到顶部