页面滚动

接下来我们将介绍 YIS 中页面滚动相关的特性。

与 Hy 的差异

YIS 在滚动方面做了一些优化，使用浏览器原生滚动，这样性能更好。这点和 Hy 使用的类 iScroll 的 js 滚动方案差异较大，对整个 APP 的布局方式影响较大，不可不察。

在 Hy 里要实现页面的滚动，一般会利用 flex 创建一个固定头尾，内容伸缩的布局。然后初始化 iScroll 的高，作为一个滚动容器。

<style>
html, body { height: 100%; }
.app-page { display: flex; height: 100%; }
.app-page .app-page-head { height: 64px; }
.app-page .app-page-container { flex: 1; overflow: hidden; }
.app-page .app-page-foot { height: 52px; }
</style>

<div class="app-page">
    <div class="app-page-head"></div>
    <div class="app-page-container"></div>
    <div class="app-page-foot"></div>
</div>

当利用 body 的自身 overflow 滚动的特性的时候，这种 height: 100%;的配置就会出现问题。

全局滚动

YIS 应用中提供了 Page 组件作为页面的容器。由于使用的是 dom 的滚动，所以，千万不要添加 height: 100%; overflow: hidden; 等样式，任由内容将 Page 的高度撑开即可。

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

class Home extends PageCore {
    render() {
        return <Page>{/* 内容区域 */}</Page>;
    }
}

配合滚动，我们也提供了下拉刷新、加载更多等功能，可以查看 Page 功能。

局部滚动

除了页面的全局滚动，很多时候，还是需要 flex 布局配合局部滚动来实现一些功能的。此时，就可以将 Page 改成 flex 布局，通过 Scroller 组件来实现局部滚动了。

import { PageCore } from "@qnpm/yis";
import { Page, Scroller } from "@qnpm/yis/components";
import styles from "./main.css";

class Home extends PageCore {
    render() {
        return (
            <Page class={styles.container}>
                <div>{/* 上部分内容 */}</div>
                <Scroller>{/* 内容区域 */}</Scroller>
                <div>{/* 下部分内容 */}</div>
            </Page>
        );
    }
}

在这种方式里，Scroller 必须是定高的（固定高度或者 flex 的），这样内容区域的高度超过 Scroller 的高度才可以滚动。

注：由于使用的是 dom 原生滚动，所以在 Android 手机上，是没有弹性效果的。但是如果使用局部滚动，iOS 的弹性效果可能跟局部滚动有冲突。

禁止 IOS 弹性效果

使用局部滚动对于 IOS 来说，因为有回弹效果，所以可能对体验有所伤害。但是你可以直接通过两种方式来禁用掉回弹效果。

方式一：在 app.json 中通过 disablePageBounce 参数设置。

代码节选自：app.json 
{
    "pages": {
        "home": {
            "disablePageBounce": true // 是否禁用页面回弹功能，默认false，仅支持iOS
        }
    }
}

方式二：通过 disableBounce 这个 API 来设置。

import { PageCore } from '@qnpm/yis';

class Home extends PageCore {
    constructor(props) {
        super(props);
        
        this.disableBounce(true);
    }
}
Page
代码核心