使用多个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同时存在导致过渡动画出错的问题。

上一篇 下一篇

猜你喜欢

热点阅读