思路:
- 继承原有的组件,重写_changedState方法
- 添加两个图片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)
}
}