前言

最近在写一个搜索栏然后弹出面板的功能需求。由于数据体量很大，一次性获取所有的数据会使得加载十分缓慢，为了请求速度，加上还要顾及界面的优雅，必须采用滚动进行翻页。

就在我准备采用传统的通过监听滚动条位置刷新的时候，发现了个不错的插件BetterScroll，这是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。

尽管它大大的简化了需要我写的代码，我仍然踩了一些坑，于是想记录一下。

React项目中使用BetterScroll

由于官网上的示例是VUE的，所以基于React Hooks的使用我自己写了一个。

1、正确的DOM结构

要注意我们设置的ref要挂在正确的dom上，如下：


/*
**
**  ...省略很多代码
**
*/

const wrapperRef = useRef(null)

return <div className="container">
  <div className="wrapper" ref={wrapperRef}>
    <ul className="content">
        <li>list-item</li>
        //  ...省略一万项
        <li>list-item</li>
    </ul>
  </div>
</div>

除了content之外，还需要在外层再套一层wrapper，笔者就在这里遇到了第一个坑，我粗心的将ref挂在了content上，导致一直无法滚动。

2、初始化BetterScroll实例

第二步便是初始化BetterScroll实例，代码如下：

/*
**
**  ...省略很多代码
**
*/

// BetterSroll实例
const [bsObj, setBsObj] = useState(null)

useEffect(() => {
  initBs() // 初始化实例
  return ()=> {
    if(bsObj && bsObj.destroy) {
      bsObj.destroy() // 销毁
    }
  }
}, [])

const initBs = () => {
  setBsObj(() => {
    return new BetterScroll(wrapperRef.current, { // 对应的Dom：wrapperRef.current
      //  ...配置项
    })
  })
}

在这个过程中，我遇到的第二个坑就是不小心监听了content的数据变化，使得在数据变化后，会重新初始化实例。这样会导致滚动时变得不流畅，并且在绑定下拉刷新的方法后，会重复的调用下拉的方法，看上去卡顿十分明显。

3、下拉刷新和上拉加载

代码如下：

useEffect(() => {
  if(bsObj) {
    bsObj.on("pullingUp", pullingUp)
  }
}, [bsObj])

const pullingUp = () => {
  // 换页的逻辑，不赘叙了
  
  setTimeout(() => {
    bsObj.finishPullUp();
  }, 2000)
}

这里finishPullUp是告知betterScroll执行完一次pullUp了，可以准备执行下一次pullUp，这里设置一个定时器是为了不要触发的太频繁。

pullingDown和pullingUp其实是差不多的，懒得写了。

这里的坑其实主要在于版本问题，我那时候pullDown事件一直挂不上去，看了下本地的版本还是1.5的，只要把版本安装到2.0以上便可以挂上去了。