【react】实现横向滚动加载

效果

react横向滚动加载

右滑实现滚动加载。滑动到最底部的时候，可以调用后端接口请求下一页的数据。

方法一

使用antd官方推荐的库react-infinite-scroll-componen。

但在实现过程中，右滑到底的时候无法调用next方法。

方法二

使用onWheel和useScroll，可能获取到滚动条滑动的距离，能计算出是否滑动到最右边，但是更为细致的计算还得再深入一下。

const ref = useRef(null);
const scroll = useScroll(ref);

const onWheel = ()=>{
  console.log('scroll:', scroll)
}

<div id='srcoll' onWheel={onWheel} ref={ref}></div>

方法三

const fetchData = async (page:number)=>{
  try{
    const res = await getData(page);
    setData([...data, ...res.data]); // 关键点
  }catch(err){
    console.log(err)
  }
}

const onSrcoll = (e) => {
  e.persist();
  const { scrollWidth, scrollLeft, clientWidth } = e.target;
  if (scrollWidth - scrollLeft === clientWidth && scrollLeft && !isSrcollToRight) {
    // 关键点，滚动到最右边了
    setPage(page + 1);
    fetchData(page + 1);
  }
};

<Space
  style={{
    width: '100%',
    overflow: 'auto', // 关键点
  }}
  onScroll={onSrcoll}
>
  {data.length > 0 ? (
    data.map((item: any) => {
      return (
        <Card/>
      );
    })
  ) : (
    <p>暂无回放记录</p>
  )}
</Space>

能够直接判断是否滚动到最右边 ，倒回来向左滚动的时候，也不存在判断是否还需要调用接口，省略了各种位置参数值计算的一步。参考：https://juejin.cn/post/7114195571321077768

如果存在这样一个情况，切换group id后，滚动的card列表的滚动条能够重新定位到最左边，则可以设置scrollLeft值为0，如下：

const onSrcoll = (e) => {
  e.persist();
  setScrollEvent(e); // here
  const { scrollWidth, scrollLeft, clientWidth } = e.target;
  if (scrollWidth - scrollLeft === clientWidth && scrollLeft && !isLoadedAll) {
    // 滚动到最右边了
    setOffset(offset + 1);
    getHistoryParams({ page: offset + 1 });
  }
};
  
  
// 重新设置滚动条位置为最左边
if (scrollEvent?.target?.scrollLeft) {
  scrollEvent.target.scrollLeft = 0;
}

补充：合成事件中的 stopPropagation() 和 preventDefault()阻止事件冒泡；如果要以异步方式访问事件属性，应该对事件调用 event.persist() ，这将从池中删除合成事件，并允许用户代码保留对事件的引用。