react瀑布流视图

爱吃皮皮虾79

已于 2022-02-17 16:35:44 修改

阅读量821

点赞数 1

文章标签： react.js javascript 前端

于 2022-02-17 16:31:40 首次发布

本文链接：https://blog.csdn.net/m0_46417610/article/details/122986365

版权

//用于绘制瀑布流视图组件，
import Masonry from 'react-masonry-component';

const masonryOptions = {
  gutter: 10,
};

//滚动到底部进行翻页
const handleOnScroll = (e: any) => {
    if (e.target) {
      const contentScrollTop = e.target.scrollTop; //滚动条距离顶部
      const clientHeight = e.target.clientHeight; //可视区域
      const scrollHeight = e.target.scrollHeight; //滚动条内容的总高度
      if (pageNum >= total) {
        return;
      }
      if (contentScrollTop + clientHeight >= scrollHeight) {
        setPageNum(pageNum + 1);
        //调用接口，将获取的数据拼接在一起
        addList(pageNum + 1);
      }
    }
  };
<div style={{ height: '100%', overflow: 'auto' }} onScrollCapture={handleOnScroll}>
        <Masonry
          className={'my-gallery-class'} // default ''
          options={masonryOptions} // default {}
          disableImagesLoaded={false} // default false
          updateOnEachImageLoad={false} // default false and works only if disableImagesLoaded is false
        >
          {dataList.map((item) => (
            <div style={{ marginBottom: '10px' }} key={item.id}>
            //每个item渲染
              <IssueTopicItem
                data={item}
                reload={() => {
                //重新加载，数据重置
                  queryPageList(1);
                  setPageNum(1);
                }}
              />
            </div>
          ))}
        </Masonry>
        <Spin spinning={loading} style={{ width: '100%', margin: 'auto' }} />
      </div>