uni-app nvue中的scroll-view编译到h5后点击或滚动屏幕会自动添加css样式

uni-app nvue中的scroll-view编译到h5后点击或滚动屏幕会自动添加css样式

操作步骤:

预期结果:

不添加style

实际结果:

手机端添加了style

bug描述:

scroll-view 在nvue模式下, 发行到h5端,手机浏览的时候,点击屏幕或者滑动屏幕都会被自动添加style样式
如何取消,或者修复一下,谢谢
如图,我要在scroll-view 写悬浮,根本写不了,因为你们这个样式

信息类别 信息内容
产品分类 uniapp/H5
PC开发环境 Windows
PC开发环境版本 win10
HBuilderX类型 正式
HBuilderX版本 3.2.9
浏览器平台 手机系统浏览器
浏览器版本 v3
项目创建方式 HBuilderX

bug描述图片


更多关于uni-app nvue中的scroll-view编译到h5后点击或滚动屏幕会自动添加css样式的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app nvue中的scroll-view编译到h5后点击或滚动屏幕会自动添加css样式的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是WebKit内核浏览器(如iOS Safari、Android Chrome)在滚动容器时的默认高亮效果,属于浏览器原生行为。

解决方案:

  1. CSS重置样式(推荐): 在App.vue或页面样式中添加:

    /* 禁用所有元素的高亮效果 */
    * {
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
    }
    
    /* 或仅针对scroll-view */
    scroll-view {
      -webkit-tap-highlight-color: transparent;
    }
    
  2. nvue页面特殊处理: nvue页面需在页面样式或公共样式中设置:

    /* nvue页面需要单独设置 */
    page {
      -webkit-tap-highlight-color: transparent;
    }
    
  3. 检查CSS优先级: 确保自定义样式优先级高于浏览器默认样式,可使用!important

    scroll-view {
      -webkit-tap-highlight-color: transparent !important;
    }
回到顶部