uniapp小程序双击复制

最新推荐文章于 2024-08-05 14:24:00 发布

Lora_0925

最新推荐文章于 2024-08-05 14:24:00 发布

阅读量535

点赞数 2

文章标签： uni-app 小程序 Powered by 金山文档

本文链接：https://blog.csdn.net/Lora_0925/article/details/129639821

版权

在uni-app中，由于view标签不支持双击事件，开发者需要自定义事件来实现这一功能。通过记录两次点击的时间差，当间隔小于300ms时视为双击，执行相应操作，如复制文本。若超过300ms，则视为单击事件。示例代码展示了如何实现双击复制标题的逻辑，使用setTimeout来延迟执行单击事件。

摘要由CSDN通过智能技术生成

目前uni-app view标签不支持双击事件，所以只能自定义事件。

代码实现效果：双击复制。

 <view class="title" @click="handClick">
     <view>标题 </view>
  </view>

data中要定义：

lastTapTimeoutFunc: null,

lastTapDiffTime: 0,

点击事件：

 // 双击
    handClick() {
      let _this = this;
      let curTime = new Date().getTime();
      let lastTime = _this.lastTapDiffTime;
      _this.lastTapDiffTime = curTime;
      //两次点击间隔小于300ms, 认为是双击
      let diff = curTime - lastTime;
      if (diff < 300) {
        uni.setClipboardData({
          data: "双击标题",
          success: () => {
            console.log("success");
          },
        });
        clearTimeout(_this.lastTapTimeoutFunc); 
        // 成功触发双击事件时，取消单击事件的执行
      }else {
        // 单击事件延时300毫秒执行
           _this.lastTapTimeoutFunc = setTimeout(function() {
            console.log("单击")
            uni.setClipboardData({
              data: "单击标题",
              success: () => {
                console.log("success");
              },
            });
           }, 300); 
      }
    },