Question

我刚刚创建了一个新的 ionic vue 应用程序（标签模板），并注意到在将模式切换为 ios 后路由动画消失了。
使用 md 一切正常。

我的index.html：

<!DOCTYPE html>
<html lang="en" mode="ios">
  <head>
    <meta charset="utf-8" />
    <title>Ionic App</title>

在路由时也会在控制台中弹出此错误

TypeError: Cannot set property 'innerText' of null
    at animateLargeTitle (ios.transition-48010460.js?2f12:1)
    at createLargeTitleTransition (ios.transition-48010460.js?2f12:1)
    at iosTransitionAnimation (ios.transition-48010460.js?2f12:1)
    at eval (index-c3ff7f2e.js?9897:1)
    at step (tslib.es6.js?f530:102)
    at Object.eval [as next] (tslib.es6.js?f530:83)
    at fulfilled (tslib.es6.js?f530:73)

我的版本：

Ionic CLI       : 6.14.1  
Ionic Framework : @ionic/vue 5.6.6  
Vue             : 3.0.0
Vue-router      : 4.0.0

Answer 1

问题是可折叠大标题配置不正确。

它应该是这样的：

<ion-header :translucent="true">
  <ion-toolbar>
    <ion-title> {{ greeting }} </ion-title>
    <ion-buttons slot="end">
      <ion-button router-link="/test" routerDirection="forward" color="dark">
        <ion-icon :icon="timeOutline" size="large" />
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content :fullscreen="true">
  <ion-header collapse="condense">
    <ion-toolbar class="tab-toolbar">
      <ion-title size="large"> {{ greeting }} </ion-title>
    </ion-toolbar>
  </ion-header>
</ion-content>

这里也是我用来测试的仓库：https://github.com/NBprojekt/ionic-vue-routing
和一个有效的 example

ios 的 Ionic vue 路由器动画不起作用

1 个答案: