微信小程序使用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
    })
  },

 

posted @ 2024-01-04 15:35  小杨观世界  阅读(162)  评论(0编辑  收藏  举报