uni-app ios15.0 image组件长按出现白色矩形框并且可以拖拽

uni-app ios15.0 image组件长按出现白色矩形框并且可以拖拽

操作步骤：

  • 复现环境：任意一台苹果ios15.0及以上 app-plus 找一个image长按就会出现白色矩形框

预期结果：

  • 长按无反应或者出现拖拽图标

实际结果：

  • 出现白色矩形

bug描述：

【报Bug】ios15.0 image组件长按出现白色矩形框并且可以拖拽

相关链接：

附件图片

image image


### 表格信息
| 项目属性         | 值            |
|------------------|---------------|
| 产品分类         | uniapp/App    |
| PC开发环境       | Windows       |
| PC开发环境版本号 | Windows 10     |
| HBuilderX类型   | 正式          |
| HBuilderX版本号 | 3.2.10        |
| 手机系统         | iOS           |
| 手机系统版本号   | IOS 14        |
| 手机厂商         | 苹果          |
| 手机机型         | 任意一台ios15.0以上版本 |
| 页面类型         | vue           |
| 打包方式         | 云端          |
| 项目创建方式     | HBuilderX     |

更多关于uni-app ios15.0 image组件长按出现白色矩形框并且可以拖拽的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

测试确实有这个问题，应该是iOS15的新特性，我们先调研一下

更多关于uni-app ios15.0 image组件长按出现白色矩形框并且可以拖拽的实战教程也可以访问 https://www.itying.com/category-93-b0.html


设置draggable为false，可关闭长按拖动图片。详见文档

嗯。目前是这样临时解决了一下

但是长按还会出现个类似放大镜的东西

回复 1***@qq.com: 用的img 还是image, 可以替换成image试试

查看相关问题:https://ask.dcloud.net.cn/question/133147

这是iOS 15系统引入的默认行为，属于系统级特性。当用户长按图片时，iOS会自动显示选择框并提供拖拽功能。

解决方案：

  1. CSS解决方案（推荐）：
/* 禁用iOS长按选择 */
image {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* 或者更具体的样式 */
uni-image {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
  1. 全局样式设置： 在App.vue的全局样式中添加：
/* 禁用所有元素的长按选择 */
* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
  1. 针对特定图片： 如果只需要对某些图片禁用此功能，可以添加自定义类名：
<image class="no-select" src="..."></image>

.no-select {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
回到顶部