开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何让嵌套的视图分页截获所有的滑动，这样父视图分页就不会滑动

在前端开发中，如果需要实现嵌套的视图分页截获所有的滑动，可以通过以下步骤实现：

使用合适的前端框架或库：选择一个适合你的项目的前端框架或库，如React、Vue.js等。这些框架提供了组件化的开发方式，可以更方便地管理视图和状态。
创建父子组件：将需要嵌套的视图拆分为父子组件。父组件负责整体的分页逻辑，子组件负责具体的内容展示。
使用事件传递机制：在父组件中监听滑动事件，并将事件传递给子组件。可以使用框架或库提供的事件传递机制，如React中的props或Vue.js中的自定义事件。
子组件处理滑动事件：在子组件中处理滑动事件，可以根据具体需求选择合适的方式，如使用CSS属性控制滑动、监听touch事件等。
阻止事件冒泡：在子组件中阻止滑动事件的冒泡，确保父组件不会接收到滑动事件。可以使用事件对象的stopPropagation方法来阻止事件冒泡。

通过以上步骤，可以实现嵌套的视图分页截获所有的滑动，确保父视图分页不会滑动。在实际应用中，可以根据具体需求进行适当的调整和优化。

腾讯云相关产品和产品介绍链接地址：

腾讯云前端开发相关产品：https://cloud.tencent.com/product/webhosting
腾讯云移动开发相关产品：https://cloud.tencent.com/product/mobile
腾讯云云原生相关产品：https://cloud.tencent.com/product/cloudnative
腾讯云音视频相关产品：https://cloud.tencent.com/product/vod
腾讯云数据库相关产品：https://cloud.tencent.com/product/cdb
腾讯云服务器运维相关产品：https://cloud.tencent.com/product/cvm
腾讯云网络通信相关产品：https://cloud.tencent.com/product/vpc
腾讯云网络安全相关产品：https://cloud.tencent.com/product/ddos
腾讯云人工智能相关产品：https://cloud.tencent.com/product/ai
腾讯云物联网相关产品：https://cloud.tencent.com/product/iot
腾讯云存储相关产品：https://cloud.tencent.com/product/cos
腾讯云区块链相关产品：https://cloud.tencent.com/product/baas
腾讯云元宇宙相关产品：https://cloud.tencent.com/product/vr

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

聊聊Android嵌套滑动

最近工作中遇到了需求是使用 Bottom-Sheet 交互的弹窗，使用了 design 包里面的 CoordinatorLayout 和 BottomSheetBehavior ，因为弹窗承载的页面相对来说还是比较复杂的页面，所以也踩了好几个坑。之前UI交互类的东西接触的也比较少，于是把Android里面嵌套滑动相关的内容也过了一遍，在这里做一些分享。在嵌套滑动控件的场景中，可以在Android的事件分发机制本身做一些处理，外部拦截或者内部消化触摸事件。但是这样的解决方法有几个弊端：

01

Android知识点基础篇（二）

asset与res.png ** 注意： ** 1 assets目录下的资源文件不会在R.java自动生成ID，所以读取assets目录下的文件必须指定文件的路径。可以通过AssetManager类来访问这些文件。比如要读取assets目录下的background.png：

03

嵌套滑动通用解决方案--NestedScrollingParent2

京东首页这是京东的首页，忽略顶部和顶部，大致理解视图结构就是：最外层为多布局的RecyclerView，最后一个item是tabLayout+ViewPager，ViewPager的每个fragment内也是RecyclerView。这是电商App首页常用的布局方式。

03

淘宝首页Bug！嵌套滑动及NestedScroll

学习嵌套滑动的相关文章：自定义View事件之进阶篇(一)-NestedScrolling(嵌套滑动)机制. Android NestedScrolling机制完全解析带你玩转嵌套滑动

02

干货 | 携程机票RN复杂交互实践

海涛，携程前端开发工程师，负责机票主流程预订、React Native技术栈相关开发工作。

02

微信小程序常用视图容器组件

组件是视图层基本的组成单元，具备UI风格样式以及特定的功能效果。当打开某款小程序之后，界面中的图片、文字等元素都需要使用组件，小程序组件使用灵活，组件之间通过相互嵌套进行界面设计，开发者可以通过组件的选择和样式属性设计出不同的界面效果。一个组件包括开始标签和结束标签，属性用来装饰这个组件的样式。

01

Android View滑动冲突全面解析-夯实基础

滑动冲突这件事我们日常开发中应该是经常见，在我刚学习Android的时候，viewPager 与 SlidingMenu 侧滑栏的冲突也是搞得我一头雾水，不知道该怎么去解决，所以经常会去采用问百度的做法，这样下来的结果就是没有自己的思想了。网上的解决方案也都千篇一律，因为大家都很聪明啊。

02

利用Android嵌套滑动机制轻松实现顶部布局置顶

传统的Android事件分发是子控件消费了事件，那么父控件就不能再处理这个事件了。也就是说一旦内部的滑动控件消费了滑动操作，外部的滑动控件就不能获取到这个滑动动作也就无法做处理了。在我们上一个情景里，滑动内容列表控件要求头布局和导航布局作出响应就是要求他们的共同父布局作出响应，显然用传统的事件分发处理是很困难的。

03

Android高频面试专题 - 提升篇（三）事件分发机制

当用户点击屏幕里View或者ViewGroup的时候，将会产生一个事件对象，这个事件对象就是MotionEvent对象，这个对象记录了事件的类型，触摸的位置，以及触摸的时间等。MotionEvent里面定义了事件的类型，其实很容易理解，因为用户可以在屏幕触摸，滑动，离开屏幕动作，分别对应：

04

macOS 开发基础教程视频 - 理解bounds本质

在便捷的网络时代学习，更注重对基础知识的借与鉴。在macOS 开发基础教程视频课程的NSView章节中，解释了关于视图的frame和bounds的坐标参照系统，限于授课经验与课程时间，感觉对NSView的bounds属性，表述的不够深入，希望通过本文帮助观看课程的同学加深对bounds的理解，并通过实例运用，体会在NSView中bounds的真正价值。

04

Base封装(二)-- 封装属于自己的Library(UI篇)

版权声明：本文为博主原创文章，转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/73554768

01

Python中的finally

现代语言一般都内置了对异常处理的支持，其中较为广泛使用的就是try语句了。(by gashero)且一般来说其子句还包含有except和finally。Python从Modula-3语言得到了关于异常处理的灵感，其异常处理也使用了如上的方法，与Java、C#等语言的异常处理很相像，所以本文对finally的讨论相信也适用于这两种语言，不过我并没有实际测试过，希望大家辨证的看待finally在其他语言中的应用。

03

PureBlue 主题更新记录

修复文章目录过长覆盖 footer 的问题本来想集成 Alogolia 搜索，无奈问题一个接着一个，只好放弃

03

DPL 来了——百度2019AI开发者大会DuerOS公开课摘要解读之三

在百度2019AI开发者大会上有很多相对精彩的公开课，DuerOS相关的公开课有4场，分别是：

01

View的事件分发及滑动冲突的解决

一次触摸事件，ACTION_DOWN和ACTION_UP是必须存在的，ACTION_MOVE视情况而定。

04

Android开发实战（二十一）：浅谈android:clipChildren属性

实现功能： 1、APP主界面底部模块栏 2、ViewPager一屏多个界面显示 3、........ 首先需要了解一下这个属性的意思，即是否允许子View超出父View的返回，有两个值true 、false ，默认true 使用的时候给子View和根节点View控件都设置android:clipChildren="false"，那么这个子View就不会限制在父View当中 -----------------------------------------------------------------

03

【Android从零单排系列二十七】《Android视图控件——HorizontalScrollView》

小伙伴们，在上文中我们介绍了Android视图组件ScrollView，本文我们继续盘点，介绍一下视图控件的HorizontalScrollView。

01

安卓 View 的事件体系

View 的位置由它的四个顶点来决定, 分别对应 View 的四个属性:top, left, right, bottom, 其中top是左上角的纵坐标, left 是左上角的横坐标, right是右下角的横坐标, bottom是右下角的纵坐标. 需要注意的是, 这些坐标都是相对于View的父容器来说的，这是一种相对坐标.

01

Android开发笔记（一百零一）滑出式菜单

滑出式菜单从界面上看，像极了一个水平滚动视图HorizontalScrollView，当然也可以使用HorizontalScrollView来实现侧滑菜单。不过今天博主要说的是利用线性布局LinearLayout来实现，而且是水平方向上的线性布局。可是LinearLayout作为水平展示时有点逗，因为如果下面有两个子视图的宽度都是match_parent，那么LinearLayout只会显示第一个子视图，第二个子视图却是怎么拉也死活显示不了。倘若在外侧加个HorizontalScrollView，由于HorizontalScrollView的宽度只能是wrap_content，因此子视图的宽度也只能是wrap_content而不能是match_parent了，故而HorizontalScrollView做不到子页面全屏的效果。现在我们既希望两个子视图的宽度是match_parent，又希望能够拖动两个子视图，还有没有办法呢？办法肯定是有的，在《Android开发笔记（三十五）页面布局视图》中，我们提到margin和padding都可用来设置空隙，空隙的数值都是正数，其实空隙值也能是负数，负数表示该视图被隐藏了一部分，仿佛一张纸插了部分纸面到书中，于是只有一部分露了出来。具体到LinearLayout的编码实现，对应的便是LinearLayout.LayoutParams的leftMargin参数，若该参数为正数，则视图页面拉出了一段空白；若该参数为负数，则视图页面隐藏了一段内容；若该参数是该视图宽度的赋值，则表示视图页面完全隐藏了起来，跟visible="gone"的效果类似。所以我们可以给视图添加触摸监听器OnTouchListener，在触摸坐标发生变化的同时，给菜单子页面隐入隐出对应的宽度，从而达到抽屉式拉出菜单的效果。一旦触摸弹起，根据手势滑动的距离，判断当前是要拉出整个菜单，还是缩回才拉出一部分的菜单。这个判断可按照滑动偏移是否达到屏幕一半宽度的条件，至于自动拉出或者自动缩进的动画，可由Runnable来定时刷新视图的leftMargin参数。下面是一个简单侧滑的效果截图：

07

NestedScrolling 机制深入解析

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/details/71553411

03

一文帮你搞定H5、小程序、Taro长列表曝光埋点

Tech 导读 “埋点”（数据采集）是数据分析的重要手段；对于前端埋点来说最复杂的是各种事件的监听，本文以曝光埋点为例，介绍几种滑动列表曝光事件监听方案及在原生、Taro框架下的最佳实践，希望对前端同学有所帮助。

02

Android View的事件分发机制

在用户触摸屏幕时，总是离用户触摸点最近的控件来响应触摸事件，如果最近的控件没有实现响应事件，那这个事件会不断的向父类传递，直到有view响应时，就会将触摸反馈的事件流传递给这个view的onTouchEvent()方法，如下图：如果CustmoView中不响应onTouchEvent()，那面事件会传递给LayoutView中，如果在LayoutView中响应了onTouchEvent()，那面事件就不会再传递给RootView了。

01

RecyclerView 必知必会

回顾整篇文章，发现我们已经实现了RecyclerView的很多扩展功能，包括：打造万能适配器、添加Item事件、添加头视图和尾视图、设置空布局、侧滑拖拽。

09

RecyclerView必知必会

本文的代码以图片形式显示，点击图片显示高清图。前言下文中Demo的源代码地址：RecyclerViewDemo(Github)。 Demo1: RecyclerView添加HeaderView和FooterView，ItemDecoration范例。 Demo2: ListView实现局部刷新。 Demo3: RecyclerView实现拖拽、侧滑删除。 Demo4: RecyclerView闪屏问题。 Demo5: RecyclerView实现setEmptyView()。 Demo6: Recyc

02

一文解决Android View滑动冲突

上一篇文章我们讲述了「Android View事件分发机制」。如果你对View的事件分发还不熟悉，建议先去看一下一文读懂Android View事件分发机制它是我们今天滑动冲突解决的理论基础！

03

Android中文API——ScrollView

Android中文翻译组：http://androidbox.sinaapp.com/

03

iOS实例——滑动列表展现/隐藏顶部视图

项目中需要一个效果：下滚列表时顶部的自定义视图不移动，上移时隐藏顶部视图，提高列表的展现范围。在此基础上海加了一个隐藏列表时的动态渐入渐出效果，如下：

01

手把手带你撸一个网易云音乐首页（三）

Hello, 大家好，今天准备和大家继续分享如何利用 Swift 来实现一个网易云音乐的首页；上俩篇文章文章发布以后，我收获了不少小伙伴的关注与点赞，同时也得到了一些非常有用的建议，在这里再次感谢大家的认可, 你们的鼓励与建议是我技术输出路上最大的动力。

01

Flutter布局基础——Column竖直布局

Column-是竖直方向布局子视图的Widget，和Row相似，如果想要子视图充满，可使用Expanded把子视图包括起来。

05

Ios常用第三方框架（二）

图表 PNChart - 国内开源作者，动态的图表。 swift-linechart - 功能完整、实用的折线图组件。使用方便，参数配置简单。是不可多得的优质组件--swift。 ios-charts - 一款优秀 Android 图表开源库 MPAndroidChart 的 Swift 语言实现版（支持 Objective-C 和 Swift 调用）。缺省提供的示例代码为 Objective-C。 TEAChart - xhacker/TEAChart 一个简洁的 iOS 图表库，支持柱状图、饼图

06

你必须知道的react redux 陷阱

React Redux 是 Redux 的官方 React UI 绑定层。它允许您的 React 组件从 Redux 存储中读取数据，并将操作分派到存储以更新状态。

03

jquery 绑定事件 - mouseover() mouseout() mouseenter() mouseleave() hover()

进入子元素也会触发mouseover()事件，那么如果#small的div没有嵌套在里面是否会触发呢？这样应该就不会。

03

Android中RecycleView与ViewPager冲突的解决方法及原理

在实际开发中，我们经常遇到需要在ListView或RecycleView头部添加ViewPager实现Banner轮播效果，并需要添加下拉刷新，上拉加载功能。

01

RecyclerView 必知必会

导语 RecyclerView是Android 5.0提出的新UI控件，可以用来代替传统的ListView。 Bugly之前也发过一篇相关文章，讲解了 RecyclerView 与 ListView 在缓存机制上的一些区别： Android ListView 与 RecyclerView 对比浅析--缓存机制今天精神哥来给大家详细介绍关于 RecyclerView，你需要了解的方方面面。本文来自腾讯天天P图团队——damonxia(夏正冬)，Android工程师前言下文中Demo的源代码地址： h

07

Android中控制和禁止ScrollView自动滑动到底部的方法

因为Android很多函数都是基于消息队列来同步，所以需要一部操作，addView完之后，不等于马上就会显示，而是在队列中等待处理，虽然很快，但是如果立即调用fullScroll， view可能还没有显示出来，所以会失败

02

RecyclerView的NestedScroll实现

RecyclerView中的NestedScroll流程手指触碰之后，onInterceptTouchEvent触发ACTION_DOWN：调用startNestedScroll，沿着View树往上寻找可以接受嵌套滑动的父View，如果找到了，则会回调父View的onStartNestedScroll以及onNestedScrollAccepted 当手指滑动的时候，触发onTouchEvent中的ACTION_MOVE：调用dispatchNestedPreScroll将嵌套滑动事件给

02

View的滑动冲突的分析和处理实践

文中有用到 Scroller 来实现弹性滑动，不了解的可以先看下 View的滑动实现方式。

04

前端组件设计原则

我在最近的工作中开始使用 Vue 进行开发，但是我在上一家公司积累了三年以上 React 开发经验。虽然在两种不同的前端框架之间进行切换确实需要学习很多，但是二者之间在很多基础概念、设计思路上是相通的。其中之一就是组件设计，包括组件层次结构设计以及组件各自的职责划分。

02

前端组件设计原则

我在最近的工作中开始使用 Vue 进行开发，但是我在上一家公司积累了三年以上 React 开发经验。虽然在两种不同的前端框架之间进行切换确实需要学习很多，但是二者之间在很多基础概念、设计思路上是相通的。其中之一就是组件设计，包括组件层次结构设计以及组件各自的职责划分。

03

【Web技术】314- 前端组件设计原则

我在最近的工作中开始使用 Vue 进行开发，但是我在上一家公司积累了三年以上 React 开发经验。虽然在两种不同的前端框架之间进行切换确实需要学习很多，但是二者之间在很多基础概念、设计思路上是相通的。其中之一就是组件设计，包括组件层次结构设计以及组件各自的职责划分。

04

干货 | 携程APP Native/RN内嵌Flutter UI混合开发实践和探索

随着各种多端技术的蓬勃发展，如今的移动端和前端早已不再拘泥于自身的边界，而是不断延伸、扩展和融合，逐步向着真正的大前端技术迈进。跨端技术也从早期的Cordova/PhoneGap、纯H5页面发展到如今的ReactNative（以下简称RN）、Weex、小程序、Flutter群雄并存的局面。各种技术栈各有优劣和特点，技术选型需视团队自身情况而定，没有绝对好坏之分。然而在实际开发中，并不是只选用一种技术栈，那么研究多种技术栈融合和嵌套使用的就有了迫切的必要性。

01

面试iOS 机会在自己手中

前言面试是我们工作的敲门砖，正好现在也到了我们金九银十的招聘季，在这我汇出32个面试题希望能帮到正在面试的你。加油（同样有不足的地方还望指出我们一起商讨，有兴趣的可以加我的iOS交流群: 6423

05

Litho在动态化方案MTFlexbox中的实践

MTFlexbox是美团内部应用的非常成熟的一种跨平台动态化解决方案，它遵循了CSS3中提出的Flexbox规范来抹平多平台的差异。MTFlexbox适用于重展示、轻交互的业务场景，与现有HTML、React Native、Weex等跨平台方案相比，MTFlexbox具备着性能高、渲染速度快、兼容性高、原生功能支持度高等优势。但其缺点在于不支持复杂的交互逻辑，不适合复杂交互的业务场景。目前，MTFlexbox已经广泛应用在美团首页、搜索、外卖等重要业务场景。本文主要介绍在MTFlexbox中使用Litho优化性能的实践经验，更多关于MTFlexbox的实践内容，可查阅《MTFlexbox自动化埋点探索》。

02

前端组件设计原则

我在最近的工作中开始使用 Vue 进行开发，但是我在上一家公司积累了三年以上 React 开发经验。虽然在两种不同的前端框架之间进行切换确实需要学习很多，但是二者之间在很多基础概念、设计思路上是相通的。其中之一就是组件设计，包括组件层次结构设计以及组件各自的职责划分。

02

小程序白屏问题和内存研究

在开发小程序应用中，QA发现过几次页面白屏的情况，苦于难易复现和调试，故想对小程序白屏问题进行一番探究。

01

CoordinatorLayout使用（二）：Behavior流程和事件流

上一篇，我们大体理解了 Behavior简单理解具体代码可以见 https://github.com/2954722256/use_little_demo 对应 coordinator 的 Module

06

京东购物车分页方案探索和落地

--导读-- 本文主要结合京东购物车的特性，从技术和业务层面综合考量，探索商品附属信息分页加载方案，为逐步扩容的购物车诉求做好底层技术支撑。通过本文，读者可以充分了解到主数据分页加载和附属信息分页加载分别适用哪些业务场景。在实际开发过程中，结合应用特性选择合适的分页技术方案，保证应用低碳高效运行。

03

像 QQ 一样处理滑动冲突

在项目中，如果要用到滑动控件嵌套滑动控件，总会让人很心塞。因为很可能会出现冲突的问题。这里举个例子，利用事件分发机制，处理侧滑菜单控件和列表中的侧滑删除控件间的冲突。

01

使用 UICollectionView 实现分页滑动效果

在上篇博客中，给大家演示了如何利用 UICollectionView 这个强大的控件去实现一个卡片轮播的效果，后来有网友联系我说:"他遇到一个问题，当他滚动的 item 宽度与屏幕宽度一致时，滚动效果是正常的，但当把 item 宽度的值设置成小于屏幕宽度的时候，滚动就会出现遮挡的 bug, 这该如何解决呢!"

02

RecyclerView性能优化

上面的 onBindViewHolder方法中进行了日期的比较和日期的格式化，这个是很耗时的，在 onBindViewHolder方法中，应该只是将数据 set到视图中，而不应进行业务的处理。

06

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭