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回调