React-better-scroll-遇到的深坑

[PleaseStartYourPerformance]

前言：
摸爬滚打了两天，什么滚动失效，什么下拉刷新失效，基本常见的脑残的坑都踩过了。CR一手 希望对大家有帮助

简介

better-scroll是啥？

一款更好用的移动端滚动插件

better-scroll能做什么

PC端的滚动在移动端显得很笨，better-scroll能给你带来更优质更接近移动端的滚动体验（还在等什么 只要998想要即可带回家）

优点

① 原生。不依赖于任何库或框架，完全基于原生 JS 实现。
② 轻量。编译后的代码大小是 63kb，压缩后是 35kb，gzip 后仅有 9kb！
③ 强大。对于那些常规的滚动需求（如图片轮播，局部文字滚动等）均可轻松满足，完全可以媲美 Swiper.js 和 iScroll.js 等经典插件。

缺点

坑比较多....也比较深...甚至措不及防

better-scroll 的基本用法

ps:我这边用的是 @1.12.2 有更新的2.0版本 但是使用上的坑真的没解决 在滚动中就跪了 后面有机会在补充2.0吧

import BScroll from 'better-scroll'
//在componentDidMount中
componentDidMount（）{
        const wrapper: HTMLElement | null = document.querySelector('.wrapper')
        this.scroll = wrapper && new BScroll(wrapper, {
            scrollY: true,
            pullUpLoad: {
                threshold: 80,
                stop: 0
            }
        });
}

ok 第一个坑来了

在render中你必须这样的结构

<div class="wrapper"> 
    // 注意这里只对第一个div产生效果 高度必须大于wrapper的高度
    <div></div>
</div>

曾经我天真的以为这样真的就可以了 呵呵

wrapper 需要绝对定位

.wrapper{
   position: absolute;
   width:100%;
   height: 100%;
   overflow: hidden;
  // white-space: nowrap;千万不要看其他文章有这个属性 ，就是坑
}

下拉刷新

注意一定要使用个防抖函数不用也要放到setTimeout()中 别问为什么 问就是教训

        const scrollOn = () => {
            const { loading } = this.state;
            !loading && this.setState({
                params: {
                    p: this.p,
                    page: this.state.params.page + 1
                },
                loading: true,
            }, () => {
                this.init();
            });
        };
   
        this.scroll.on('pullingUp', debounce(scrollOn), false)