PageIndicator自定义选中和非选中图片的方法

思路:

  1. 继承原有的组件,重写_changedState方法
  2. 添加两个图片property,改变状态的时候用对应的图片

废话少说,直接上代码:
(ts版本,js的借鉴思路自己改)

const {ccclass, property} = cc._decorator;

@ccclass

export class MyPageIndicator extends cc.PageViewIndicator {

@property({type: cc.SpriteFrame})

selectedSpriteFrame: cc.SpriteFrame = null;

@property({type: cc.SpriteFrame})

unSelectedSpriteFrame: cc.SpriteFrame = null;

_indicators:cc.Node[];

_pageView:cc.PageView;

constructor()

{

    super();

}

_changedState(){

    var indicators = this._indicators;

    if (indicators.length === 0) return;

    var idx = this._pageView.getCurrentPageIndex();

    if (idx >= indicators.length) return;

    for (var i = 0; i < indicators.length; ++i) {

        var node = indicators[i];

        node.getComponent(cc.Sprite).spriteFrame = this.unSelectedSpriteFrame;

    }

    // indicators[idx].opacity = 255;

    indicators[idx].getComponent(cc.Sprite).spriteFrame = this.selectedSpriteFrame;

    console.log("change state indicators",idx)

}

}

2赞

感谢分享,建议如果附上效果图会更好!

_changedState 这个调不到啊