uni.previewImage在uni-app手机APP很多时候需要点击两次遮盖才是会关闭预览图片

uni.previewImage在uni-app手机APP很多时候需要点击两次遮盖才是会关闭预览图片

开发环境 版本号 项目创建方式
Windows 10专业版 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：10专业版

HBuilderX类型：正式

HBuilderX版本号：4.24

手机系统：Android

手机系统版本号：Android 12

手机厂商：小米

手机机型：redmi10X

页面类型：nvue

vue版本：vue3

打包方式：云端

项目创建方式：HBuilderX

### 示例代码：

```html
<view class="info">
<image class="image-content-image"  [@click](/user/click)="previewImage" mode="scaleToFill"
src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg">
</image>  
</view>  

methods: {  
    previewImage(e) {  
        const current = e.target.dataset.url; // 获取图片路径  
        console.log("湖区哦" + JSON.stringify(current))  
        uni.previewImage({  
            current: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg", // 当前显示图片的http链接  
            urls: ["https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg"], // 需要预览的图片http链接列表  
            indicator: "default",  
            loop: true,  
            longPressActions: {  
                itemList: ['发送给朋友', '保存图片', '收藏'],  
                success: function(data) {  
                    console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');  
                },  
                fail: function(err) {  
                    console.log(err.errMsg);  
                }  
            },  
            success: (res) => {  
                console.log('预览成功', res); // 成功回调逻辑‌:ml-citation{ref="1,3" data="citationList"}  
              },  
              fail: (err) => {  
                console.error('预览失败', err); // 失败回调逻辑‌:ml-citation{ref="1,3" data="citationList"}  
              },  
              complete: () => {  
                console.log('预览操作完成'); // 无论成功/失败均执行‌:ml-citation{ref="3" data="citationList"}  
              }  
        });  
    }  
},

操作步骤：

点击预览图片，点击遮盖关闭

预期结果：

点击一次就关闭

实际结果：

很多情况下需要点击两次才是触发关闭

bug描述：

页面类型vue情况下在手机APP也是一样的要点遮盖两次，有些只要点一次。很多情况下是点两次次才是会关闭。代码非常简单的测试了，还是一样的


更多关于uni.previewImage在uni-app手机APP很多时候需要点击两次遮盖才是会关闭预览图片的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

hello ， 你使用的什么设备出现的这个问题，可否提供一下视频看一下效果

更多关于uni.previewImage在uni-app手机APP很多时候需要点击两次遮盖才是会关闭预览图片的实战教程也可以访问 https://www.itying.com/category-93-b0.html


视频你看不出来，点一次，跟点两次。代码就是我发的情况。一定要视频的话我给你录一个

点第一次直接关闭了，后面的是我在弹出来，点了两次。 当然有些情况就是，弹出来就要点两次才能关闭

回复 2***@qq.com: 你那点击两次是有长按的效果吗？快速点击两次按理来说应该是放大，这个暂时也判断不出来出现啥问题了

回复 DCloud_UNI_yuhe: 就是很平常的点第一次没关闭预览，就再次点了一次，并不是瞬间连点两次。

回复 DCloud_UNI_yuhe: 快速点两次放大正常

回复 DCloud_UNI_yuhe: 建议你们去小米手机开发者哪里可以用它们的模拟器测试测试一下。

这个问题的确在uni-app中比较常见，主要是由于uni.previewImage在Android平台的事件处理机制导致的。以下是可能的原因和解决方案：

  1. 事件冒泡问题： 在Android平台上，点击遮罩层时可能会触发两次事件：一次是遮罩层本身的点击事件，另一次是图片容器的点击事件。这会导致需要点击两次才能关闭预览。

  2. 解决方案： 可以尝试以下两种方法：

方法一：使用setTimeout延迟关闭

let previewTimer = null;

previewImage() {
  if(previewTimer) clearTimeout(previewTimer);
  
  uni.previewImage({
    // ...其他参数
    success: () => {
      previewTimer = setTimeout(() => {
        // 这里可以添加关闭后的逻辑
      }, 300);
    }
  });
}

方法二：使用自定义遮罩层

data() {
  return {
    showPreview: false,
    previewImage: ''
  }
},
methods: {
  previewImage() {
    this.showPreview = true;
    this.previewImage = 'https://...';
  },
  closePreview() {
    this.showPreview = false;
  }
}
回到顶部