微信小程序使用rich-text 里面图片预览下载问题
方案:将html文本里面的图片地址保留起来,然后做一个长按/双击事件,放手后进行预览图片地址(缺点:无法确定长按的是那一张,全部展示)
html
<view class="text-content" style="max-height: max-content;"> <!-- 双击 --> <rich-text bindtap="doubleClick" user-select nodes="{{JournalismDetailDto.thisDetail.journalismContent}}"></rich-text> <!-- 长按 <rich-text data-timeStamp="" bindtouchstart="onStart" bindtouchend="onEnd" user-select nodes="{{JournalismDetailDto.thisDetail.journalismContent}}"></rich-text> --> </view>
js
长按
//整理图片 var paths = []; var idx = res.data.thisDetail.journalismContent.indexOf(`src="${app.globalData.downloadurl}/`); while (idx !== -1) { var idx2= res.data.thisDetail.journalismContent.indexOf('>',idx); //img节点 var tempStr= res.data.thisDetail.journalismContent.substring(idx, idx2).replace('src="','');//找到地址 var idx3=tempStr.indexOf('"');//找到url地址位置 if(idx3!==-1){ var path = tempStr.substring(0,idx3); paths.push(path); } idx = res.data.thisDetail.journalismContent.indexOf(`src="${app.globalData.downloadurl}/`, idx2 + 1); } //长按操作 startTime: null, endTime: null, picslist:[],//图片集合 onStart: function (event) { this.data.startTime = event.timeStamp console.log("按下时间戳:" + this.data.startTime) }, onEnd: function (event) { this.data.endTime = event.timeStamp console.log("抬起时间戳:" + this.data.endTime) let ti = this.data.endTime - this.data.startTime if (ti >= 1500) { console.log("大于指定时间,开始执行对应的业务逻辑") wx.previewImage({ urls: this.data.picslist, // 需要预览的图片http链接列表 }) } else { console.log("小于指定时间,不执行操作") } }
双击
//双击操作 doubleClick: function(e) { // 获取这次点击时间 var thisTime = e.timeStamp; // 获取上次点击时间 默认为0 var lastTime = this.data.lastTime; // 打印这次点击时间 console.log("这次时间:" + thisTime) console.log("上次时间:" + lastTime) console.log(thisTime - this.data.lastTime) if (lastTime != 0) { if (thisTime - this.data.lastTime < 500) { console.log("双击事件") wx.previewImage({ urls: this.data.picslist, // 需要预览的图片http链接列表 }); } } // 赋值 this.setData({ lastTime: thisTime }) },
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 零经验选手,Compose 一天开发一款小游戏!
· 通过 API 将Deepseek响应流式内容输出到前端
· 因为Apifox不支持离线,我果断选择了Apipost!