cocosCreator动态调整pageView下面的标记indicator

news2025/1/22 8:11:13

pageView是我们在开发过程中经常使用到的一个组件，但是之前很少去动态修改过该属性的indicator,一般都是使用的默认的。今天产品要求实现一个动态效果，就是当页面左滑或者右滑时，下面的标记也会有一个左右滑动的效果(不知道怎么描述合适，大家进来看效果图自然明白)
参考链接，更详细https://lengmo714.top/18e312f1.html

效果如图：

请添加图片描述

实现思路：

1、监听滑动方向

使用 page-turning 事件，结合 currentPage 和 previousPage 的差值判断滑动方向。
2、动态调整标记尺寸
根据滑动方向，决定标记的拉伸动画从哪一侧开始，使用 UITransform 的 contentSize 属性进行拉伸。
3、区分左右滑动
左滑时标记从左侧向右拉伸，右滑时标记从右侧向左拉伸。

代码

import { tween, Size } from 'cc';

private previousPage: number = 0; // 记录上一次的页面索引
private currentPage: number = 0;  // 当前页面的索引

private updateIndicatorHighlight() {
    const indicator = this._view._PageC_banner.indicator;
    if (!indicator) return;

    const markers = indicator.node.children;
    const currentPage = this._view._PageC_banner.getCurrentPageIndex();

    for (let i = 0; i < markers.length; i++) {
        const sprite = markers[i].getComponent(Sprite);
        if (sprite) {
            let uiTransform = markers[i].getComponent(UITransform);

            if (i === currentPage) {
                // 根据滑动方向决定拉伸动画
                if (currentPage > this.previousPage) {
                    // 左滑：从左往右拉伸
                    Tool.setImgSprite(markers[i], "texture/illustrate/UI_Introduce_Point1", UIPnlillustrateLogic.bundleName);
                    uiTransform.setContentSize(this.markerWidth2, this.markerHeight); // 初始化为较小的尺寸
                    tween(uiTransform)
                        .to(0.2, { contentSize: new Size(this.markerWidth1, this.markerHeight) }, { easing: 'smooth' })
                        .start();
                } else {
                    // 右滑：从右往左拉伸
                    Tool.setImgSprite(markers[i], "texture/illustrate/UI_Introduce_Point1", UIPnlillustrateLogic.bundleName);
                    uiTransform.setContentSize(this.markerWidth2, this.markerHeight); // 初始化为较小的尺寸
                    tween(uiTransform)
                        .to(0.2, { contentSize: new Size(this.markerWidth1, this.markerHeight) }, { easing: 'smooth' })
                        .start();
                }
            } else {
                // 非当前页面，设置为未选中状态
                Tool.setImgSprite(markers[i], "texture/illustrate/UI_Introduce_Point2", UIPnlillustrateLogic.bundleName);
                tween(uiTransform)
                    .to(0.2, { contentSize: new Size(this.markerWidth2, this.markerHeight) }, { easing: 'smooth' })
                    .start();
            }
        }
    }

    // 更新 previousPage
    this.previousPage = currentPage;
}