前言
最近在寫(xiě)一個(gè)搜索欄然后彈出面板的功能需求锅睛。由于數(shù)據(jù)體量很大，一次性獲取所有的數(shù)據(jù)會(huì)使得加載十分緩慢历谍，為了請(qǐng)求速度现拒，加上還要顧及界面的優(yōu)雅，必須采用滾動(dòng)進(jìn)行翻頁(yè)望侈。
就在我準(zhǔn)備采用傳統(tǒng)的通過(guò)監(jiān)聽(tīng)滾動(dòng)條位置刷新的時(shí)候印蔬，發(fā)現(xiàn)了個(gè)不錯(cuò)的插件BetterScroll，這是一款重點(diǎn)解決移動(dòng)端（已支持 PC）各種滾動(dòng)場(chǎng)景需求的插件甜无。
盡管它大大的簡(jiǎn)化了需要我寫(xiě)的代碼扛点，我仍然踩了一些坑哥遮，于是想記錄一下。
React項(xiàng)目中使用BetterScroll
由于官網(wǎng)上的示例是VUE的陵究，所以基于React Hooks的使用我自己寫(xiě)了一個(gè)眠饮。
1、正確的DOM結(jié)構(gòu)
要注意我們?cè)O(shè)置的ref要掛在正確的dom上铜邮，如下：
/*
**
** ...省略很多代碼
**
*/
const wrapperRef = useRef(null)
return <div className="container">
<div className="wrapper" ref={wrapperRef}>
<ul className="content">
<li>list-item</li>
// ...省略一萬(wàn)項(xiàng)
<li>list-item</li>
</ul>
</div>
</div>
除了content之外仪召，還需要在外層再套一層wrapper，筆者就在這里遇到了第一個(gè)坑松蒜，我粗心的將ref掛在了content上扔茅，導(dǎo)致一直無(wú)法滾動(dòng)。
2秸苗、初始化BetterScroll實(shí)例
第二步便是初始化BetterScroll實(shí)例召娜，代碼如下：
/*
**
** ...省略很多代碼
**
*/
// BetterSroll實(shí)例
const [bsObj, setBsObj] = useState(null)
useEffect(() => {
initBs() // 初始化實(shí)例
return ()=> {
if(bsObj && bsObj.destroy) {
bsObj.destroy() // 銷(xiāo)毀
}
}
}, [])
const initBs = () => {
setBsObj(() => {
return new BetterScroll(wrapperRef.current, { // 對(duì)應(yīng)的Dom：wrapperRef.current
// ...配置項(xiàng)
})
})
}
在這個(gè)過(guò)程中，我遇到的第二個(gè)坑就是不小心監(jiān)聽(tīng)了content的數(shù)據(jù)變化惊楼，使得在數(shù)據(jù)變化后玖瘸，會(huì)重新初始化實(shí)例。這樣會(huì)導(dǎo)致滾動(dòng)時(shí)變得不流暢檀咙，并且在綁定下拉刷新的方法后雅倒，會(huì)重復(fù)的調(diào)用下拉的方法，看上去卡頓十分明顯弧可。
3蔑匣、下拉刷新和上拉加載
代碼如下：
useEffect(() => {
if(bsObj) {
bsObj.on("pullingUp", pullingUp)
}
}, [bsObj])
const pullingUp = () => {
// 換頁(yè)的邏輯，不贅敘了
setTimeout(() => {
bsObj.finishPullUp();
}, 2000)
}
這里finishPullUp是告知betterScroll執(zhí)行完一次pullUp了棕诵，可以準(zhǔn)備執(zhí)行下一次pullUp裁良， 這里設(shè)置一個(gè)定時(shí)器是為了不要觸發(fā)的太頻繁。
pullingDown和pullingUp其實(shí)是差不多的年鸳，懶得寫(xiě)了趴久。
這里的坑其實(shí)主要在于版本問(wèn)題丸相，我那時(shí)候pullDown事件一直掛不上去搔确，看了下本地的版本還是1.5的，只要把版本安裝到2.0以上便可以掛上去了灭忠。
結(jié)束語(yǔ)
總的來(lái)說(shuō)膳算，這個(gè)插件并不難，踩的坑也基本都是粗心的問(wèn)題弛作，但還是花了很多時(shí)間去研究涕蜂。之所以還是寫(xiě)一篇文來(lái)記錄，主要還是網(wǎng)上有太多copy的答案映琳，大部分感覺(jué)都是無(wú)用功机隙。所以希望當(dāng)其他的萌新在用它時(shí)遇到跟我相同問(wèn)題的時(shí)候蜘拉，這篇文章能夠給他們提供一些解決的思路。
