前言
最近在写一个搜索栏然后弹出面板的功能需求。由于数据体量很大，一次性获取所有的数据会使得加载十分缓慢，为了请求速度，加上还要顾及界面的优雅，必须采用滚动进行翻页。
就在我准备采用传统的通过监听滚动条位置刷新的时候，发现了个不错的插件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以上便可以挂上去了。
结束语
总的来说，这个插件并不难，踩的坑也基本都是粗心的问题，但还是花了很多时间去研究。之所以还是写一篇文来记录，主要还是网上有太多copy的答案，大部分感觉都是无用功。所以希望当其他的萌新在用它时遇到跟我相同问题的时候，这篇文章能够给他们提供一些解决的思路。
网友评论