Page

Page 组件是一个页面容器组件，推荐将所有的页面内容都放在该容器内。和其他 UI 组件一样，Page 是通过 yis/components 来引用的。

import { Page } from "@qnpm/yis/components";

与 PageCore 的区别：

  • Page：是一个 UI 组件，可以看做一个滚动容器，提供了滚动、下拉刷新等 UI 功能。
  • PageCore：是一个纯逻辑组件，是页面的基类，提供了 webview 相关设置的封装。

1. 滚动 scroller 模式

Page 默认提供了一个页面容器，与 hy 中所不同的是，Page 使用的是 dom 的滚动而不是类 iScroll 方式的 js 滚动。关于两者的区别，更多内容可以参照 页面全局滚动。

除此之外，我们基于 Page 封装了一些增强的功能，包括：下拉刷新、加载更多、吸顶等。为了与基本模式区分，我们提供了使用 Scroller 组件作为根节点的模式，通过设置 scroller 属性为 true，就可以开启这种模式。

2. 下拉刷新

Page 提供了页面维度的下拉刷新功能，即下拉刷新的时候拉动的是整个 webview。与 Hy 中的类 iScroll 滚动方案相比，这种方案的性能更好。通过 Page 组件的 refresh 属性控制是否使用下拉刷新功能，通过 onRfresh 回调处理下拉刷新的逻辑。

<Page
    scroller={true}
    refresh={true}
    onRefresh={() => {
        /* 下拉刷新逻辑 */
    }}
>
    {/* 内容 */}
</Page>

3. 加载更多

与下拉刷新不同，Page 组件提供的加载更多功能，是通过 js 来实现的。通过 loadMore 属性控制是否试用下拉刷新功能，通过 onScrollToLower 回调来处理滚动到底部时的逻辑。

<Page
    scroller={true}
    loadMore={true}
    onScrollToLower={() => {
        /* 滚动到底部时的逻辑 */
    }}
>
    {/* 内容 */}
</Page>
PageCore
页面滚动