better-scroll 笔记

技巧

1. 当绑定容器为列表外面的元素时

<div
            className="wrapper"
            ref={scrollContaninerRef}
        >
            <div
                className="refresh-container"
                data-content-before="下拉刷新"
            >
                {props.children}
                {/* 滑到底部加载动画 */}
                <div className="refresh-footer" style={PullUpdisplayStyle}>正在加载</div>
                {/* 顶部下拉刷新动画 */}
                <div className="refresh-header" style={PullDowndisplayStyle}>Loading</div>
            </div>
        </div>

 2 当绑定容器列表元素时

   return (
        <div className="refresh-container" ref={scrollContaninerRef} data-content-before="下拉刷新">
            {props.children}
            {/* 滑到底部加载动画 */}
            <div className="pull_up_loading" style={PullUpdisplayStyle}>正在加载</div>
            {/* 顶部下拉刷新动画 */}
            <div className="pull_down_loading" style={PullDowndisplayStyle}>Loading</div>
        </div>
    );

 总结： 绑谁谁就可以滚动

坑

• 最外层wrapper一定要有高度且不能大于列表高度 和overflow 这和其他列表滚动一致
• 列表如果是异步加载一定要加载成功后再去初始化, 组件懒加载也要注意这个问题
• 有时会遇到滚到一半就不能滚动了，是因为刚开始请求的数据不完全，比如图片只请求了一半，这样就会导致bs计算高度不正确，所以需要监听图片加载，执行scroll.refresh()
• 防抖debounce，监听图片加载时@load='imageLoad'，如果不设置防抖，那么每加载一张图片就会执行一次监听，十分浪费资源，所以使用防抖来减少这种函数的调用