<Page> 是一个 UI 组件，表示应用程序屏幕。NativeScript 应用程序通常由一个或多个 <Page> 组成，它们包装了内容，例如 <ActionBar> 和其他 UI 小部件。

单个页面

<Page>
  <ActionBar title="My App" />
  <GridLayout>
    <Label text="My Content"/>
  </GridLayout>
</Page>

使用 loaded 事件触发 UI 更改

一个典型场景是在页面加载后执行 UI 更改。推荐的方法是使用 loaded 事件，该事件由 NativeScript 在页面完全加载时触发。

<Page @loaded="greet">
  <ActionBar title="My App" />
  <GridLayout>
    <Label text="My Content"/>
  </GridLayout>
</Page>

export default {
  methods: {
    greet() {
      alert('Hello!').then(() => {
        console.log('Dialog closed')
      })
    }
  }
}

注意：来自 Web 背景的开发人员通常会使用 Vue 提供的 mounted 生命周期钩子，但是，在 NativeScript 中，应用程序和某些元素可能在执行 mounted 钩子时尚未加载，因此某些操作（例如警报、对话框、导航等）无法在 mounted 钩子内执行。为了解决此限制，可以使用 loaded 事件，该事件仅在应用程序准备就绪后触发。在本例中，我们使用 <Page> 元素的 loaded 事件，但此事件可用于所有 NativeScript 元素。

属性

事件

原生组件