Page 页面

为移动端的页面提供飞入飞出的效果。

注：iOS 返回时，使用了系统默认的滑动效果。因无法区分是点击按钮返回还是手势返回，点击按钮时是无动画效果的。

示例

基础用法

<script lang="ts">
  import { tick } from 'svelte'

  let page = $state<HTMLElement>()

  // 页面快照
  export const snapshot = {
    // 进入下一页前，记录当前页面状态
    capture() {
      return {
        scrollTop: page?.scrollTop,
      }
    },
    // 返回此页时，恢复页面状态
    async restore(value: any) {
      // 先恢复所有影响页面 scrollHeight 的状态

      // 使用 tick 应用已恢复的状态
      await tick()

      // 再恢复 scrollTop
      if (page) page.scrollTop = value.scrollTop
    },
  }
</script>

<Page bind:page>
  <p>...</p>
</Page>

Page

属性

属性	说明	类型	默认值
duration	页面飞入飞出的时间(毫秒)	number	150
page	页面的 DOM 元素	HTMLElement	只读

注：page 属性通常用于页面切换时，使用 snapshot 暂存与回复 scrollTop