使用多个ion-content导致页面切换动画错误
2018-06-20 本文已影响0人
ETXIN
在ionic-v3中,使用下拉刷新(ion-refresher)和无限加载(ion-infinite-scroll)必须依赖与ion-content。当同个页面需要多个分页列表时,只能在同一个页面下使用多个ion-content。这时会导致ionic切换页面时出现奇怪的动画效果,向官方提交issue后,得到v4版本发布后再解决的回应。但v3至今已有半年未更新,v4还处于alpha版本,只能自己解决了。
在ionic中找到这样一个issus:https://github.com/ionic-team/ionic/issues/10258,参照他的方法解决了动画问题。
export class Content extends Ion implements OnDestroy, OnInit {
// ...
constructor(
config: Config,
private _plt: Platform,
private _dom: DomController,
elementRef: ElementRef,
renderer: Renderer,
public _app: App,
public _keyboard: Keyboard,
public _zone: NgZone,
@Optional() viewCtrl: ViewController,
@Optional() public _tabs: Tabs
) {
super(config, elementRef, renderer, 'content');
this.statusbarPadding = config.getBoolean('statusbarPadding', false);
this._imgReqBfr = config.getNumber('imgRequestBuffer', 1400);
this._imgRndBfr = config.getNumber('imgRenderBuffer', 400);
this._imgVelMax = config.getNumber('imgVelocityMax', 3);
this._scroll = new ScrollView(_plt, _dom);
if (viewCtrl) {
// content has a view controller
// ** OLD **
/*viewCtrl._setIONContent(this);
viewCtrl._setIONContentRef(elementRef);*/
// ** FIX **
if (!viewCtrl.getIONContent()) {
viewCtrl._setIONContent(this);
viewCtrl._setIONContentRef(elementRef);
} else {
// ViewController already has main Content, this Content instance is a child of a parent content
}
this._viewCtrlReadSub = viewCtrl.readReady.subscribe(() => {
this._viewCtrlReadSub.unsubscribe();
this._readDimensions();
});
this._viewCtrlWriteSub = viewCtrl.writeReady.subscribe(() => {
this._viewCtrlWriteSub.unsubscribe();
this._writeDimensions();
});
} else {
// content does not have a view controller
_dom.read(this._readDimensions.bind(this));
_dom.write(this._writeDimensions.bind(this));
}
}
}
造成动画出错的原因是,每一次有ion-content时,都会往viewCtrl中设置content为this,使得ionic认为最后一个content才是页面所在。修改为仅viewCtrl中不存在content时才设置,即可解决多个content同时存在导致过渡动画出错的问题。