日常记录

对应chapter3
项目最大亮点之一，使用 better-scroll 打造移动端 滑动基础组件，可以移植到其他项目

分布拆解scroll组件

npm install better-scroll@next --save

函数式组件的形式进行开发，不过作为一个通用组件，scroll 组件在业务中会被经常取到原生 DOM 对象，而函数式组件天生不具备被上层组件直接调用 ref 的条件，因此需要用 React 当中一些特殊的方式来处理，即使用 forwardRef 进行包裹。

const Scroll = forwardRef((props,ref)=>{
    // 编写组件
})

参数整理

Scroll.propTypes = {
    direction: PropTypes.oneOf(['vertical','horizental']), // 滑动方向
    click: true, // 是否支持点击
    refresh: PropTypes.bool, // 是否刷新 ？
    onScroll: PropTypes.func, // 滑动触发的回调函数
    pullUp: PropTypes.func, // 上拉逻辑
    pullDown: PropTypes.func, // 下拉逻辑
    pullUpLoading: PropTypes.bool, // 是否显示上拉 loading 动画
    pullDownLoading: PropTypes.bool, // 是否显示 下拉 loading 动画
    bounceTop: PropType.bool, // 是否支持 吸附顶部
    bounceBottom: PropType.bool //是否支持 吸附底部
};