react + better-scroll 实现下拉刷新 上拉加载更多
React 实现 加载 刷新 scroll 上拉 Better
2023-09-11 14:15:29 时间
1.封装组件
components/Scroll/index.tsx
/** * 下拉刷新 上拉加载更多 */ 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.页面调用
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>
.
相关文章
- [转] react-router4 实现按需加载
- react + 图灵api 实现模拟客服
- react 设置代理(proxy) 实现跨域请求
- react-native 模仿原生 实现下拉刷新/上拉加载更多(RefreshListView)
- react-native flex 布局 详解
- react 实现pure render的时候,bind(this)隐患
- react 使用 moment 进行 日期格式化
- react 组件之间的通信
- React Props
- react-native 异常处理 Execution failed for task ':app:mergeDebugResources'.
- React-Native 之 GD (十四)小时风云榜 及 当前时间操作 及 上一小时、下一小时功能实现
- React Native商城项目实战05 - 设置首页的导航条
- 从零开始的react入门教程(四),了解常用的条件渲染、列表渲染与独一无二的key
- React Hooks实现异步请求实例—useReducer、useContext和useEffect代替Redux方案
- create-react-app+react-app-rewired引入antd实践
- 基于React实现的【绿色版电子书阅读器】,支持离线下载
- 基于React的贪吃蛇游戏的设计与实现
- 一、react 传值
- react项目Bug:组件销毁清除监听(Can't perform a React state update on an unmounted component.)
- React动画库之react-transition-group(入场enter、出场exit、初始化appear)
- react-native-scrollable-tab-view组件的简单使用
- arcgis api 4.x for js 结合 react 入门开发系列react全家桶实现加载天地图(附源码下载)
- 浅析Vue3新特性-Teleport(任意传送门也称瞬间移动):为什么需要Teleport、与React的Portals特性、如何使用(直接使用、与组件搭配使用、使用多个teleport)、teleport API(to及disabled使用介绍)