yellowbird的飞行日记

V1

2022/08/09阅读:37主题:默认主题

你能滚吗?——在React项目中使用better-scroll笔记

前言

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

就在我准备采用传统的通过监听滚动条位置刷新的时候,发现了个不错的插件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的答案,大部分感觉都是无用功。所以希望当其他的萌新在用它时遇到跟我相同问题的时候,这篇文章能够给他们提供一些解决的思路。

分类:

前端

标签:

前端

作者介绍

yellowbird的飞行日记
V1

公众号: yellowbird的飞行日记