首页 > 编程语言> > javascript – Ionic 4导航组件WITHOUT Angular

javascript – Ionic 4导航组件WITHOUT Angular

2019-08-23 11:38:09 作者：互联网

真的很喜欢新的离子4成分 – 尤其是NO Angular.

问题是：我像这样使用离子导航：

navElRef.push('second-page')

动画不对.看来我没有设置正确的参数或类名等.是否有关于如何使用Ionic 4 nav而没有角度的文档/建议？

解决方法:

所以,在Ionic Framework 4文档中捣乱两天后,我发现基本上没有什么可以解释如何做到这一点.

但是,……实际上并没有那么难实现.

得到：https://beta.ionicframework.com/docs/api/nav/.然后检查手机示例的元素.在Chrome开发工具(或您使用的任何工具)的元素标签中找到iframe.复制该src并在新的浏览器选项卡中打开它.现在,您可以看到一个不使用框架的工作示例.您可以复制html src并从中创建自己的index.html,它应该可以工作.

制作离子导航工作的主旨是这样的：

>确保在html标签中有class =“plt-desktop ios”mode =“ios”attrs(或者你想要的任何os)
>确保在html文件中包含js和css：’https://unpkg.com/@ionic/core@4.0.0-beta.11/dist/ionic.js‘和’https://unpkg.com/@ionic/core@4.0.0-beta.11/css/ionic.bundle.css‘
>确保ion-nav包含在ion-app标签内.
>将root =“page-one”attr添加到离子导航中,表示您最初要显示的Web组件. “page-one”是由window.customElements.define定义的组件名称 – 无论您想要它是什么.
>您可以使用ion-nav-push组件将另一个页面推送到导航组件.但是,更有可能的是,你将使用路由器(React,Page等)来处理这个问题.在您的特定路由器解决方案中,通过调用ion-nav元素上的push方法来启动页面导航：类似于：

document.querySelector( ‘离子NAV’).推(页面-2′)

您可以在此处阅读有关调用导航方法的更多信息：https://beta.ionicframework.com/docs/api/nav/

这是一个例子：

<!DOCTYPE html>
<html dir="ltr" class="plt-desktop ios" mode="ios">

<head>
  <meta charset="UTF-8">
  <title>Nav</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <script src="https://unpkg.com/@ionic/core@4.0.0-beta.11/dist/ionic.js"></script>
  <link rel="stylesheet" type="text/css" href="https://beta.ionicframework.com/docs/overrides.css">
<link rel="stylesheet" href="https://unpkg.com/@ionic/core@4.0.0-beta.11/css/ionic.bundle.css">
  <script>
    class PageOne extends HTMLElement {
      connectedCallback() {
        this.innerHTML = `
          <ion-header translucent>
            <ion-toolbar>
              <ion-title>Page One</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content padding fullscreen>
            <h1>Page One</h1>
            <ion-nav-push component="page-two">
              <ion-button class="next">Go to Page Two</ion-button>
            </ion-nav-push>
          </ion-content>
        `;
      }
    }
    class PageTwo extends HTMLElement {
      connectedCallback() {
        this.innerHTML = `
          <ion-header translucent>
            <ion-toolbar>
              <ion-buttons slot="start">
                <ion-back-button text="Page One"></ion-back-button>
              </ion-buttons>
              <ion-title>Page Two</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content padding fullscreen>
            <h1>Page Two</h1>
            <div>
              <ion-nav-push component="page-three">
                <ion-button class="next">Go to Page Three</ion-button>
              </ion-nav-push>
            </div>
          </ion-content>
        `;
      }
    }
    class PageThree extends HTMLElement {
      connectedCallback() {
        this.innerHTML = `
          <ion-header translucent>
            <ion-toolbar>
              <ion-buttons slot="start">
                <ion-back-button text="Page Two"></ion-back-button>
              </ion-buttons>
              <ion-title>Page Three</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content padding fullscreen>
            <h1>Page Three</h1>
          </ion-content>
        `;
      }
    }
    customElements.define('page-one', PageOne);
    customElements.define('page-two', PageTwo);
    customElements.define('page-three', PageThree);
  </script>
</head>

<body>
  <ion-app>
    <ion-nav root="page-one"></ion-nav>
  </ion-app>
  <style>
    ion-toolbar {
      --background: white;
    }
  </style>
</body>

</html>

标签：javascript,ionic-framework,web-component
来源： https://codeday.me/bug/20190823/1697215.html