关于小程序图片长按实现自定义功能

原创于 2025-07-24 16:32:54 发布 · 126 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #java #前端

在业务场景中会接触到长按图片实现自定义功能的需求，这次是长按图片跳转客服聊天，在小程序image标签是支持长按识别图片的，但是功能比较单一，且不支持编辑功能项

<image src="https://.jpg" mode="" show-menu-by-longpress="true" />

具体实现代码如下

html部分

<image 
@touchstart="touchstart" 
@touchend="touchend" src="https://new99.file.vipetc.com.cn/etc99/publicQrcode.jpg" 
mode=""
 />

js部分

 touchstart(e) { //创建全局定时器变量 time：null 
      console.log("touchstart");
     this.time =  setTimeout(() => {
        uni.showActionSheet({
          itemList: ["联系客服"],
          success: (res) => {
            console.log("选中了第" + (res.tapIndex + 1) + "个按钮");
            this.openCustomer();//客服事件
          },
          fail: function (res) {
            console.log(res.errMsg);
          },
        });
      }, 1000);//事件触发1s后触发事件，模拟长按
    },
    touchend() {//事件移除清除定时器
      console.log("touchend");
      
      clearTimeout(this.time);
    },