微信小程序使用rich-text 里面图片预览下载问题

A00湖北云购科技

微信小程序使用rich-text 里面图片预览下载问题
方案：将html文本里面的图片地址保留起来，然后做一个长按/双击事件，放手后进行预览图片地址（缺点：无法确定长按的是那一张，全部展示）

1. <view class="text-content" style="max-height: max-content;">
   
2.     <!-- 双击 -->
   
3.       <rich-text bindtap="doubleClick" user-select nodes="{{JournalismDetailDto.thisDetail.journalismContent}}"></rich-text>
   
4.       
   
5.       <!-- 长按
   
6.       <rich-text data-timeStamp="" bindtouchstart="onStart" bindtouchend="onEnd" user-select nodes="{{JournalismDetailDto.thisDetail.journalismContent}}"></rich-text>
   
7.   -->
   
8.     </view>

复制代码

1. //整理图片
   
2. var paths = [];
   
3. var idx = res.data.thisDetail.journalismContent.indexOf(`src="${app.globalData.downloadurl}/`);
   
4. while (idx !== -1) {
   
5.   var idx2= res.data.thisDetail.journalismContent.indexOf('>',idx); //img节点
   
6.   var tempStr= res.data.thisDetail.journalismContent.substring(idx, idx2).replace('src="','');//找到地址
   
7.   var idx3=tempStr.indexOf('"');//找到url地址位置
   
8.   if(idx3!==-1){
   
9.     var path =  tempStr.substring(0,idx3);
   
10.     paths.push(path);
    
11.   }
    
12.   idx = res.data.thisDetail.journalismContent.indexOf(`src="${app.globalData.downloadurl}/`, idx2 + 1);
    
13. }
    
14. 
    
15. 
    
16. //长按操作
    
17. startTime: null,
    
18. endTime: null,
    
19. picslist:[],//图片集合
    
20. 
    
21. onStart: function (event) {
    
22.     this.data.startTime = event.timeStamp
    
23.     console.log("按下时间戳:" + this.data.startTime)
    
24.   },
    
25.   onEnd: function (event) {
    
26.     this.data.endTime = event.timeStamp
    
27.     console.log("抬起时间戳:" + this.data.endTime)
    
28. 
    
29.     let ti = this.data.endTime - this.data.startTime
    
30.     if (ti >= 1500) {
    
31.       console.log("大于指定时间，开始执行对应的业务逻辑")
    
32.       wx.previewImage({
    
33.         urls:  this.data.picslist, // 需要预览的图片http链接列表
    
34.       })
    
35.     }
    
36.     else {
    
37.       console.log("小于指定时间，不执行操作")
    
38.     }
    
39.   }

复制代码

1. //双击操作
   
2.   doubleClick: function(e) {
   
3.     // 获取这次点击时间
   
4.     var thisTime = e.timeStamp;
   
5.     // 获取上次点击时间 默认为0
   
6.     var lastTime = this.data.lastTime;
   
7.     // 打印这次点击时间
   
8.     console.log("这次时间：" + thisTime)
   
9.     console.log("上次时间：" + lastTime)
   
10.     console.log(thisTime - this.data.lastTime)
    
11.    
    
12.     if (lastTime != 0) {
    
13.       if (thisTime - this.data.lastTime < 500)
    
14.         {
    
15.           console.log("双击事件")
    
16.           wx.previewImage({
    
17.             urls:  this.data.picslist, // 需要预览的图片http链接列表
    
18.           });
    
19.         }
    
20.     }
    
21.     // 赋值
    
22.     this.setData({
    
23.       lastTime: thisTime
    
24.     })
    
25.   },

复制代码