引言
Cocos中通过重写源码实现循环PageView
大家好,有小伙伴私信我:
有没有办法实现循环的PageView列表的方法呢
本文将介绍一下Cocos中通过重写源码实现循环PageView。
本文源工程可在文末阅读原文获取,小伙伴们自行前往。
1.什么是PageView
PageView 是一种页面视图容器.
我们接着来看看Cocos中的PageView
2.Cocos的PageView
PageView组件。
我们仔细看下编辑器,PageView主要有以下可视选项:
-
Inertia
和Brake
,是否开启滚动惯性和开启惯性后、在用户停止触摸后滚动多快停止,0表示永不停止,1表示立刻停止。 -
Elastic
和Bounce Duration
,是否允许滚动内容超过边界,并在停止触摸后回弹、回弹持续的时间,0 表示将立即反弹。 -
Content
和Indicator
,可滚动展示内容的节点、页面视图指示器组件。 -
Direction
,页面视图滚动类型,包括水平和垂直。 -
PageEvents
,滚动视图的事件回调函数。
下面一起来看看循环PageView的实现原理
3.循环PageView的实现原理
我们直接来看效果:
- 在最后一页向后翻页时回到第一页。
- 在第一页向前翻页时跳到最后一页。
下面一起来看看如何通过重写源码实现循环PageView
4.实现循环PageView
1.环境
引擎版本:Cocos Creator 3.8.1
编程语言:TypeScript
2.资源准备
本次效果节目组直接使用官方提供的组件,效果虽然不好看,但是靠谱。
结构大概如下。
仔细翻了一下,官方组件没有支持循环滚动,我们来稍稍修改一下。
3.编写代码
首先我们先找到官方的PageView
源码。
笔者的目录在
C:\ProgramData\cocos\editors\Creator\3.8.1\resources\resources\3d\engine\cocos\ui
小伙伴们可以通过CocosDashBoard,跳转到引擎目录后再寻找。
通过源码可以看到PageView
组件继承ScrollView
组件。
我们直接找到实现翻页的核心源码(为了方便大家阅读,加了一点点注释)。
/**
* 自动滚动到页面的方法。
* 如果存在弹性回弹效果,将启动弹性回弹并根据边界的情况调整当前页面索引。
* 如果没有弹性回弹效果,根据触摸滑动的方向和速度来判断是否切换到相邻页面,并在合适的情况下执行页面切换。
* 最终会根据计算得到的目标页面索引,使用 scrollToPage