组件

Scroller 滚动容器组件

滚动容器支持水平和垂直方向的滚动。垂直模式下组件在 Js 层面实现了下拉事件和上拉事件。YIS 推荐开发者在实现页面的下拉刷新时使用 Page 封装的 native 刷新以获得更好地用户体验。

Scroller 组件配合子组件中的 Sticky 组件实现滚动吸顶。

示例

代码节选自：yis-demo/src/pages/components/scroller/index.js

import {
    View,
    Scroller,
    Button
} from '@qnpm/yis/components';
import {
    registerPage,
    PageCore
} from '@qnpm/yis';
import styles from './main.css';

export default class ScrollerDemo extends PageCore {
    render() {
        return (
            <div className={styles.container}>
                <Scroller
                    className={styles.vertical_container}
                    scrollY
                    upperThreshold={100}
                    lowerThreshold={100}
                    onScrollToUpper={(e)=>console.log('onScrollToUpper')}
                    onScrollToLower={(e)=>console.log('onScrollToLower')}
                    scrollWithAnimation={true}>
                    {
                        // .......
                    }
                </Scroller>
            </div>
        );
    }
}

横向滚动示例

代码节选自：yis-demo/src/pages/components/scroller/index.js

export default class ScrollerDemo extends PageCore {
    state = {
        scrollLeft: 0,
        scrollWithAnimation: true
    };

    renderList(className, sticky) {
        return list.map((i, index) => {
            // ...
        });
    }

    render() {

        return (
            <div className={styles.container}>
                <Scroller
                    scrollLeft={this.state.scrollLeft}
                    className={styles.horizontal_container}
                    scrollX
                    scrollWithAnimation={this.state.scrollWithAnimation}>
                    {
                        this.renderList(styles.horizontal_item, false)
                    }
                </Scroller>

            </div>
        )
    }
}

参数

参数名	类型	必选	默认值	描述
className	string	×	无	根节点类名
scrollX	bool	×	false	横向滚动
scrollY	bool	×	true	纵向滚动
scrollLeft	number	×	0	横向滚动位移，单位为 px。可以通过改变这个值来达到滚动到某个位置的效果。
scrollTop	number	×	0	纵向滚动位移，单位为 px。可以通过改变这个值来达到滚动到某个位置的效果。
scrollWithAnimation	bool	×	false	滚动到某个位置时，是否启用动画
onScrollToUpper	function	×	无	滚动到顶部时执行的回调
onScrollToLower	function	×	无	滚动到底部时执行的回调
upperThreshold	number	×	50	滚动到距离顶部xx时执行onScrollToUpper回调
lowerThreshold	number	×	50	滚动到距离底部xx时执行onScrollToLower回调