uni-app 在nvue中使用自己开发的android原生组件，当页面元素过多出现滚动条时，组件内的上下滑动事件失效，变成整个页面的滑动

uni-app 在nvue中使用自己开发的android原生组件，当页面元素过多出现滚动条时，组件内的上下滑动事件失效，变成整个页面的滑动

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

产品分类：uniapp/App

PC开发环境操作系统：Mac

PC开发环境操作系统版本号：11

HBuilderX类型：正式

HBuilderX版本号：3.4.7

手机系统：Android

手机系统版本号：Android 9.0

手机厂商：华为

手机机型：nova3

页面类型：vue

vue版本：vue2

打包方式：云端

App下载地址或H5网址：链接: https://pan.baidu.com/s/1O5S2iqonf1Lp5Lz7W6Rvpw?pwd=82tw 提取码: 82tw 复制这段内容后打开百度网盘手机App，操作更方便哦

示例代码：

【报Bug】自己开发的android原生组件，  在nvue里面使用，    当页面里面元素过多出现上下滚动条的时候，  组件内的上下滑动事件 就失效，变成整个页面的上下滑动  
ios 是正常的  就Android有这个问题

操作步骤：

解压上传的demo 导入hbuidlx  选择自定义基座运行

预期结果：

滑动nvue组件里面的内容，不要导致整个nvue滚动

实际结果：

滑动nvue组件里面的内容，会导致整个nvue滚动

更多关于uni-app 在nvue中使用自己开发的android原生组件，当页面元素过多出现滚动条时，组件内的上下滑动事件失效，变成整个页面的滑动的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

此问题是滑动冲突的问题，在原生组件中使用requestDisallowInterceptTouchEvent来获取事件的处理。

更多关于uni-app 在nvue中使用自己开发的android原生组件，当页面元素过多出现滚动条时，组件内的上下滑动事件失效，变成整个页面的滑动的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个Android平台上常见的滚动冲突问题。在nvue中使用原生组件时，当页面可滚动且组件内部也需要滚动时，会出现手势冲突。

解决方案：

  1. 在原生组件中重写onInterceptTouchEvent方法，处理触摸事件拦截逻辑：
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
    switch (ev.getAction()) {
        case MotionEvent.ACTION_DOWN:
            getParent().requestDisallowInterceptTouchEvent(true);
            break;
    }
    return super.onInterceptTouchEvent(ev);
}
  1. 或者在nvue页面中，给滚动容器添加scrollable属性：
<scroll-view scrollable="true">
    <!-- 内容 -->
</scroll-view>

  1. 也可以尝试在原生组件中实现NestedScrollingChild接口，使组件支持嵌套滚动。

  2. 如果以上方法无效，可以在组件初始化时设置：

setNestedScrollingEnabled(true);
回到顶部