ScrollView/PageView多级嵌套组件

ScrollView/PageView 多级嵌套滑动组件

开发环境

  • 引擎版本:Cocos Creator 2.4.0 / 3.6.0
  • 编程语言:TypeScript

已适配平台

H5 微信小游戏 Android原生 iOS原生 抖音小游戏 OPPO小游戏 vivo小游戏
:heavy_check_mark: :heavy_check_mark:

本资源仅支持测试通过平台,其他平台不做默认支持,请自行适配。(理论上支持全平台)

资源介绍

使用本组件,可以支持scrollview/pageview多层嵌套,多级滑动

scrollinscroll1.gif

功能特点

  • 支持多层嵌套,多层滑动
  • 使用ts编写,理论上与creator支持的平台一致
  • 需要注意,子Scroll组件不能开启回弹,所以在代码里做了判断,当有ScrollParent有父组件时,会关闭子Scroll组件的回弹

文档教程

  • 组件为源码发布,可自由调整和修改
  • 源码可以工程script/component内提取(ScrollViewExt.ts)
  • 只需要在ScrollView/PageView同级添加组件,并配置对应的父级即可
  • scrollinscrollp2.png

预览地址

预览

原理

介绍一下原理,如果有想自己实现的,也可以参照一下原理

  • ScrollViewExt组件,会替换(监管)ScrollView/PageView的touch事件
  • 在ScrollViewExt组件内,判断滑动方向,当滑动方向不是自己的滑动方向时,会向ScrollParent传递事件,直到与Scroll组件方向一致后停止传递
  • 判断子ScrollViewExt是否是滑动边界,如果是边界,也会向ScrollParent传递事件
  • 另外 PageView 的滚轮事件是空的,所以为了尽量少改动,所以 当有PageView时,会阻断滚轮事件

商店地址

store | scroll_in_scroll