react18封装betterScroll2.5

前端进阶者
382 阅读2分钟
中文文档地址
https://better-scroll.github.io/docs/zh-CN/plugins/movable.html
项目中依赖
"@better-scroll/core": "^2.5.0",
"@better-scroll/mouse-wheel": "^2.5.0",
"@better-scroll/observe-dom": "^2.5.0",
"@better-scroll/observe-image": "^2.5.0",
"@better-scroll/pull-down": "^2.5.0",
"@better-scroll/pull-up": "^2.5.0",
下载依赖
cnpm install @better-scroll/core --save
// pullup 插件为 BetterScroll 扩展上拉加载的能力
cnpm install @better-scroll/pull-up --save
// pulldown 插件为 BetterScroll 扩展下拉刷新的能力
cnpm install @better-scroll/pull-down --save
// mouseWheel 扩展 BetterScroll 鼠标滚轮的能力
cnpm install @better-scroll/mouse-wheel --save
// 检测图片加载重新计算
cnpm install @better-scroll/observe-image --save
// 当这些 DOM 元素发生变化时，将会触发 scroll 的 refresh 方法
cnpm install @better-scroll/observe-dom --save
项目封装成组件
import style from './style.module.less';
import { useEffect,  useRef, ReactNode, forwardRef, useImperativeHandle } from 'react';
import BScroll from '@better-scroll/core'
import Pullup from '@better-scroll/pull-up'
import PullDown from '@better-scroll/pull-down';
import ObserveDOM from '@better-scroll/observe-dom';
import MouseWheel from '@better-scroll/mouse-wheel'
import ObserveImage from '@better-scroll/observe-image'
BScroll.use(Pullup)
BScroll.use(PullDown)
BScroll.use(ObserveDOM)
BScroll.use(MouseWheel)
BScroll.use(ObserveImage)
interface PropsType {
    pullUpOpen?: any, // 是否开启上拉加载更多
    pullDownOpen?: any, // 是否开启下拉加载
    isPullUpLoad?: boolean, // 加载中
    pullUpCallback?: () => void, // pullUp回调
    isPullDownLoad?: boolean, // 加载中
    pullDownCallback?: () => void, // pullDown回调
    list: any, // 当前滚动list,为了数据变化重新指定,绑定触发的事件
    children: { // 子内容
        list: ReactNode;
    };
}
const PullUpPullDownScroll = forwardRef((prop: PropsType, ref) => {
    useImperativeHandle( ref,
        () => ({
            'scrollBottom': () => {
                methods.handleScrollBottom();
            },
            'pullDownFinish': () => {
                methods.pullDownFinish();
            },
            'pullUpFinish': () => {
                methods.pullUpFinish();
            },
            'openPullDown': () => {
                methods.openPullDown();
            },
            'closePullDown': (str: string) => {
                methods.closePullDown();
            },
            'openPullUp': () => {
                methods.openPullUp();
            },
            'closePullUp': () => {
                methods.closePullUp();
            }
    }))
    const {pullUpOpen, pullDownOpen, isPullUpLoad, isPullDownLoad,  children} = prop;
    const bsRef = useRef<any>();
    const myBs = useRef<any>();
    // 初始化bscroll
    const methods = {
        pullingDownHandler() {
            methods.pullDownFinish();
            if (isPullDownLoad) return;
            prop.pullDownCallback && prop.pullDownCallback();
        },
        scrollHandler() {
        },
        pullingUpHandler() {
            methods.pullUpFinish();
            if (isPullUpLoad) return;
            prop.pullUpCallback && prop.pullUpCallback();
        },
        pullUpFinish() { // 重置pullUp状态
            let bs = myBs.current;
            if (bs) {
                bs.finishPullUp();
                bs.refresh();
            }
            methods.handleBsOnchange();
        },
        pullDownFinish() { // 重置pullDown状态
            let bs = myBs.current;
            if (bs) {
                bs.finishPullDown();
                bs.refresh();
            }
            methods.handleBsOnchange();
        },
        /* 手动按开启关闭下拉刷新功能 */
        openPullDown() { // 开启下拉刷新功能
            const bs = myBs.current;
            if (bs) {
                bs.openPullDown();
            }
        },
        closePullDown() { // 关闭下拉刷新功能
            const bs = myBs.current;
            if (bs) {
                bs.closePullDown();
            }
        },
        /* 手动关闭上拉加载功能 */
        openPullUp() { // 开启
            const bs = myBs.current;
            if (bs) {
                bs.openPullUp();
            }
        },
        closePullUp() { // 关闭
            const bs = myBs.current;
            if (bs) {
                bs.closePullUp();
            }
        },
        handleBsOnchange() { // 绑定事件
            let bs = myBs.current;
            if (!bs) return;
            if (pullUpOpen) {
                bs.off("pullingUp");
                bs.once("pullingUp", methods.pullingUpHandler);
            }
            if (pullDownOpen) {
                bs.off("pullingDown");
                bs.once("pullingDown", methods.pullingDownHandler);
            }
        },
        handleBsIinit() { // 初始化
            const bs = new BScroll(bsRef.current, {
                probeType: 3,
                click: true,
                scrollY: true,
                scrollX: false,
                pullUpLoad: pullUpOpen || false,
                pullDownRefresh: pullDownOpen || false,
                bounceTime: 800, // 上拉弹跳时间
                observeDOM: true, // 开启 observe-dom 插件
                observeImage: true, // 开启 observe-image 插件
                mouseWheel: { // 开启鼠标滚动
                    speed: 20,
                    invert: false,
                    easeTime: 300
                }
            })
            myBs.current = bs;
            methods.handleBsOnchange();
        },
        /* 滚动到底部 */
        handleScrollBottom() {
            let bs = myBs.current;
            if (!bs) return;
            setTimeout(() => {
                bs.refresh();
                let maxScrollY = bs.maxScrollY;
                bs.scrollTo(0, maxScrollY);
            }, 200);
        }
    }
    useEffect(() => {
        methods.handleBsOnchange();
        () => {}
    }, [prop]);
    useEffect(() => {
        // 初始化scroll
        methods.handleBsIinit();
        return () => {
            if (myBs.current) {
                myBs.current.destroy();
            }
            myBs.current = null;
        }
    },[]);
    return (
        <div className={`${style.root} 'wrapper'`} ref={bsRef}>
            <div>
                <div className={`${style.pulldown_wrapper} ${pullDownOpen ? '' : style.display_hide}`}>
                    {
                        isPullDownLoad ? <div>加载中...</div> : <div>上拉加载更多</div>
                    }
                </div>
                <div>
                    {
                        children.list
                    }
                </div>
                <div className={`${style.pullup_tips} ${pullUpOpen ? '' : style.display_hide}`}>
                    {
                        isPullUpLoad ? <div>加载中...</div> : <div>下拉加载更多</div>
                    }
                </div>
            </div>
            {/* <div className={style.pulldown_wrapper}>
                    {
                        isPullDownLoad ? <div>加载中...</div> : <div>上拉加载更多</div>
                    }
            </div>
            <div className='content'>
                {
                    children.list
                }
            </div>
            <div className={style.pullup_tips}>
                {
                    isPullUpLoad ? <div>加载中...</div> : <div>下拉加载更多</div>
                }
            </div> */}
        </div>
    )
})
export default PullUpPullDownScroll;
项目中样式
.root{
    height: 100%;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    .pulldown_wrapper{
        position: absolute;
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        transform: translateY(-100%) translateZ(0);
        text-align: center;
        color: #999;
    }
    .pullup_tips{
        position: absolute;
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        transform: translateY(100%) translateZ(0);
        text-align: center;
        color: #999;
    }
    .display_hide{
        display: none;
    }
}
使用
import PullUpPullDownScroll from '@/views/Components/PullUpPullDownScroll';
const [list, setList] = useState([]); // 当前list
/*
    绑定ref可以调用相关方法
    举例：chatBoxRef.current.scrollBottom(); // 滚动到底部
*/
const chatBoxRef = useRef();
const pullDownLoad = useRef(false); // 是否再ajax
const methods = {
    pullDwonCallback() { // 触发了下拉加载更多
    }
}

 <PullUpPullDownScroll list={list} ref={chatBoxRef}
                    pullDownOpen={true}  isPullDownLoad={pullDownLoad.current} pullDownCallback={() => methods.pullDwonCallback()} >
                    {{
                        list: (<>
                            {
                                list.map((item: any, index: string) => {
                                    return <div></div>;
                                })
                            }
                        </>)
                    }}
                </PullUpPullDownScroll>
avatar
文章
阅读
粉丝