uni-app image标签在IOS15微信H5中长按图片出现白色遮罩问题

uni-app image标签在IOS15微信H5中长按图片出现白色遮罩问题

开发环境 版本号 项目创建方式
Mac 10.16 HBuilderX

操作步骤：

  • image标签 长按图片会有白色遮罩
  • 原因是H5 的image标签里面的img标签开启了draggable
  • 在图片为二维码时长按就会触发拖拽，出现显示上的 BUG

预期结果：

  • image标签 长按图片会有白色遮罩
  • 原因是H5 的image标签里面的img标签开启了draggable
  • 在图片为二维码时长按就会触发拖拽，出现显示上的 BUG

实际结果：

  • image标签 长按图片会有白色遮罩
  • 原因是H5 的image标签里面的img标签开启了draggable
  • 在图片为二维码时长按就会触发拖拽，出现显示上的 BUG

bug描述：

  • image标签 长按图片会有白色遮罩
  • 原因是H5 的image标签里面的img标签开启了draggable
  • 在图片为二维码时长按就会触发拖拽，出现显示上的 BUG

更多关于uni-app image标签在IOS15微信H5中长按图片出现白色遮罩问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

关闭方式见文档

更多关于uni-app image标签在IOS15微信H5中长按图片出现白色遮罩问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


原来是新增了属性。。。

回复 2***@qq.com: 属性是老属性，是 iOS 新增了拖拽功能

这个问题确实是由于iOS 15微信H5环境中，uni-app的image组件内部渲染的img标签默认启用了draggable属性导致的。当用户长按图片时，系统会触发拖拽操作，从而出现白色遮罩。

解决方案：

  1. 全局样式覆盖（推荐） 在App.vue的全局样式中添加：

    img {
  -webkit-user-drag: none;
  user-drag: none;
}

  2. 组件级别样式 在具体页面的style中添加：

    .page-class img {
  -webkit-user-drag: none;
}

  3. 条件编译处理 如果需要区分平台，可以使用条件编译：

    /* #ifdef H5 */
img {
  -webkit-user-drag: none;
}
/* #endif */

  4. 使用自定义组件 如果上述方法无效，可以封装自定义图片组件：

    <template>
  <img :src="src" :style="style" @load="onLoad" @error="onError" />
</template>

<script>
export default {
  props: ['src'],
  mounted() {
    this.$el.setAttribute('draggable', false)
  }
}
</script>
回到顶部