react + better-scroll 实现下拉刷新 上拉加载更多

1.封装组件

components/Scroll/index.tsx

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142

/**  * 下拉刷新 上拉加载更多 */ import React, { forwardRef, useState,useEffect, useRef, useImperativeHandle, useMemo } from "react" import PropTypes from "prop-types" import BScroll from "better-scroll" import Loading from '../loading/index'; import Loading2 from '../loading-v2/index'; import debounce from "utils/debounce"; import './index.less';   const Scroll = forwardRef((props:any, ref:any) => {   const [bScroll, setBScroll] = useState<any>();     const scrollContaninerRef:any = useRef();     const { direction, click, refresh, pullUpLoading, pullDownLoading, bounceTop, bounceBottom } = props;     const { pullUp, pullDown, onScroll } = props;     let pullUpDebounce = useMemo(() => {     return debounce(pullUp, 500)   }, [pullUp]);     let pullDownDebounce = useMemo(() => {     return debounce(pullDown, 500)   }, [pullDown]);     useEffect(() => {     const scroll:any = new BScroll(scrollContaninerRef.current, {       scrollX: direction === "horizental",       scrollY: direction === "vertical",       probeType: 3,       click: click,       bounce:{         top: bounceTop,         bottom: bounceBottom       }     });     setBScroll(scroll);     return () => {       setBScroll(null);     }     // eslint-disable-next-line   }, []);     useEffect(() => {     if(!bScroll || !onScroll) return;     bScroll.on('scroll', onScroll)     return () => {       bScroll.off('scroll', onScroll);     }   }, [onScroll, bScroll]);     useEffect(() => {     if(!bScroll || !pullUp) return;     const handlePullUp = () => {       //判断是否滑动到了底部       if(bScroll.y <= bScroll.maxScrollY + 100){         pullUpDebounce();       }     };     bScroll.on('scrollEnd', handlePullUp);     return () => {       bScroll.off('scrollEnd', handlePullUp);     }   }, [pullUp, pullUpDebounce, bScroll]);     useEffect(() => {     if(!bScroll || !pullDown) return;     const handlePullDown = (pos: any) => {       //判断用户的下拉动作       if(pos.y > 50) {         pullDownDebounce();       }     };     bScroll.on('touchEnd', handlePullDown);     return () => {       bScroll.off('touchEnd', handlePullDown);     }   }, [pullDown, pullDownDebounce, bScroll]);       useEffect(() => {     if(refresh && bScroll){       bScroll.refresh();     }   });     useImperativeHandle(ref, () => ({     refresh() {       if(bScroll) {         bScroll.refresh();         bScroll.scrollTo(0, 0);       }     },     getBScroll() {       if(bScroll) {         return bScroll;       }     }   }));     const PullUpdisplayStyle = pullUpLoading ? { display: "" } : { display: "none" };   const PullDowndisplayStyle = pullDownLoading ? { display: "" } : { display: "none" };   return (     <div className="scroll_container" ref={scrollContaninerRef}>       {props.children}       {/* 滑到底部加载动画 */}       <div className="pull_up_loading" style={ PullUpdisplayStyle }><Loading></Loading></div>       {/* 顶部下拉刷新动画 */}       <div className="pull_down_loading" style={ PullDowndisplayStyle }><Loading2></Loading2></div>     </div>   ); })   Scroll.defaultProps = {   direction: "vertical",   click: true,   refresh: true,   onScroll:null,   pullUpLoading: false,   pullDownLoading: false,   pullUp: null,   pullDown: null,   bounceTop: true,   bounceBottom: true };   Scroll.propTypes = {   direction: PropTypes.oneOf(['vertical', 'horizental']),   refresh: PropTypes.bool,   onScroll: PropTypes.func,   pullUp: PropTypes.func,   pullDown: PropTypes.func,   pullUpLoading: PropTypes.bool,   pullDownLoading: PropTypes.bool,   bounceTop: PropTypes.bool,//是否支持向上吸顶   bounceBottom: PropTypes.bool//是否支持向下吸顶 };   export default Scroll;

2.页面调用

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

import Scroll from 'components/Scroll'; ... <Scroll   // onScroll={forceCheck}   pullUp={handlePullUp}   pullDown={handlePullDown}   ref={scrollRef}   pullUpLoading={pullUpLoading}   pullDownLoading={pullDownLoading} >   <ul className="list_content clearfix">     {       searchList.toJS().map((item:any) =>{         return (           <li key={item.comic_id}>             <Link to={"/categoryPage/category/detail?id=" + item.comic_id}>               <img src={item.cover} alt="" />               <span className="category_txt clearfix">                 <strong>{item.title}</strong>                 <span>                   <em>{item.message}</em>                   <em>{item.good}</em>                 </span>               </span>             </Link>           </li>         )       })     }   </ul> </Scroll>

.