组件代码

  1. /* eslint-disable no-return-assign */
  2. import React, { Component } from "react";
  3. import { ActivityIndicator, Toast } from "antd-mobile";
  4. import EmptyImage from "@/components/EmptyImage";
  5. import { touchEvent } from "@/utils/commonUtil";
  6. import style from "./index.less";
  8. /**
  9.  * 上拉加载
  10.  * @params { 是否正在加载 } loading
  11.  * @params { 加载数据事件 } loadData
  12.  * @params { 自定义列表卡片 } ItemDom
  13.  * @params { 列表数据 } data
  14.  * @params { 是否有更多 } isMore
  15.  * @params { 当前页 } page
  16.  * @params { 全部页 } totalPages
  17.  */
  19. interface Props {
  20.   data: any[];
  21.   ItemDom: any;
  22.   loading: boolean;
  23.   loadData: Function; // 加载数据事件
  24.   isMore: boolean; // 是否有更多
  25. }
  26. interface State {
  27.   backTopFlag: boolean;
  28.   isUp: boolean;
  29. }
  31. class Index extends Component<Props, State> {
  32.   scrollBox: any;
  34.   scrollContent: any;
  36.   state = {
  37.     backTopFlag: false,
  38.     isUp: false,
  39.   };
  41.   componentDidMount() {
  42.     this.init();
  43.   }
  45.   componentWillUnmount() {
  46.     this.scrollBox.removeEventListener("scroll", this.scrollshi, false);
  47.   }
  49.   init = () => {
  50.     this.scrollBox.addEventListener("scroll", this.scrollshi, false);
  51.     // 向下滑
  52.     touchEvent.swipeDown(window, this.scrollDown);
  53.     // 向上滑
  54.     touchEvent.swipeUp(window, this.scrollUp);
  55.   };
  57.   scrollDown = () => {
  58.     const { isUp } = this.state;
  60.     if (!isUp) return;
  61.     this.setState({
  62.       isUp: false,
  63.     });
  64.   };
  66.   scrollUp = () => {
  67.     const { isUp } = this.state;
  69.     if (isUp) return;
  70.     this.setState({
  71.       isUp: true,
  72.     });
  73.   };
  75.   // 触底事件
  76.   touchBottom = () => {
  77.     const { loadData, loading, isMore } = this.props;
  78.     if (loading || !isMore) return;
  79.     loadData();
  80.   };
  82.   scrollshi = () => {
  83.     let flag = false;
  84.     const { backTopFlag } = this.state;
  85.     const { loading, isMore } = this.props;
  87.     if (
  88.       this.scrollContent.offsetHeight -
  89.         this.scrollBox.offsetHeight -
  90.         this.scrollBox.scrollTop <=
  91.         350 &&
  92.       !flag
  93.     ) {
  94.       flag = true;
  95.       setTimeout(() => {
  96.         this.touchBottom();
  97.         flag = false;
  98.       }, 500);
  99.     }
  101.     if (
  102.       this.scrollContent.offsetHeight -
  103.         this.scrollBox.offsetHeight -
  104.         this.scrollBox.scrollTop <=
  105.         0 &&
  106.       !loading &&
  107.       !isMore
  108.     ) {
  109.       Toast.info("加载到底了～");
  110.     }
  112.     if (this.scrollBox.scrollTop > 1200) {
  113.       if (backTopFlag) return;
  114.       this.setState({
  115.         backTopFlag: true,
  116.       });
  117.     } else {
  118.       if (!backTopFlag) return;
  119.       this.setState({
  120.         backTopFlag: false,
  121.       });
  122.     }
  123.   };
  125.   render() {
  126.     const { data, ItemDom, loading } = this.props;
  127.     const { backTopFlag, isUp } = this.state;
  128.     return (
  129.       <div
  130.         className={style.scrollBox}
  131.         ref={(scrollBox) => (this.scrollBox = scrollBox)}
  132.       >
  133.         <div
  134.           className={style.scrollContent}
  135.           ref={(scrollContent) => (this.scrollContent = scrollContent)}
  136.         >
  137.           {data && data[0] ? (
  138.             data?.map((item, index) => (
  139.               <ItemDom key={`${item.id}${index}`} item={item} />
  140.             ))
  141.           ) : (
  142.             <EmptyImage type={6} />
  143.           )}
  144.           {loading && (
  145.             <div className={style.loading}>
  146.               <ActivityIndicator text="loading..." />
  147.             </div>
  148.           )}
  149.         </div>
  150.         {backTopFlag && isUp && false && (
  151.           <div className={style.goTop}>1111</div>
  152.         )}
  153.       </div>
  154.     );
  155.   }
  156. }
  158. export default Index;

样式

  1. .scrollBox {
  2.   width: 100%;
  3.   height: 100%;
  4.   overflow-y: auto;
  6.   .scrollContent {
  7.     width: 100%;
  8.   }
  10.   .loading {
  11.     width: 100%;
  12.     height: 100px;
  13.     display: flex;
  14.     align-items: center;
  15.     justify-content: center;
  16.   }
  17. }
  19. .goTop {
  20.   position: fixed;
  21.   right: 10px;
  22.   bottom: 90px;
  23.   z-index: 9999999;
  24.   width: 70px;
  25.   height: 70px;
  26.   background-color: saddlebrown;
  27.   opacity: 0;
  28. }

使用方法

  1. <!--
  2.  * @Descripttion:
  3.  * @version:
  4.  * @Author: WangPeng
  5.  * @Date: 2021-10-22 18:38:22
  6.  * @LastEditors: WangPeng
  7.  * @LastEditTime: 2021-11-15 11:29:50
  8. -->
  10. ### 实现滚动加载
  12. ## 代码演示
  14. ```javascript
  15. import ScrollList from "@/components/ScrollList";
  17. /**
  18.  * 上拉加载
  19.  * @params { 是否正在加载 } loading
  20.  * @params { 加载数据事件 } loadData
  21.  * @params { 自定义列表卡片 } ItemDom
  22.  * @params { 列表数据 } data
  23.  * @params { 是否有更多 } isMore
  24.  * @params { 当前页 } page
  25.  * @params { 全部页 } totalPages
  26.  */
  27. export default class TestPage extends Component {
  28.   render() {
  29.     return (
  30.       <div>
  31.         <ScrollList
  32.           loading={loading}
  33.           loadData={this.loadData}
  34.           ItemDom={Card}
  35.           data={list}
  36.           isMore={page < totalPages>}
  37.         />
  38.       </div>
  39.     );
  40.   }
  41. }

```

注意事项

一定要限制包裹这个组件的盒子的最大高度，不然无法实现滚动加载。