rax+react hook 实现分页效果

野性酷女 2022-10-07 01:54 158阅读 0赞

'use strict';
    import { createElement, useState, useEffect, memo } from 'rax';
    import View from 'rax-view';
    import { request } from './core/index'; //封装你的请求
    import './index.less';
    import Card from './components/index';
    import ScrollView from 'rax-scrollview';
    import Loading from 'universal-loading';
    
    export default memo((props: any) => {
    const {
    poolId = '',
    lookMore = false,
    } = props?.data?.items;
    
    // 数据
    const [caseList, setCaseList] = useState([]);
    // 更多
    const [hasMore, setHasMore] = useState(false);
    // 当前页
    const [dataOffset, setDataOffset] = useState(1);
    // 设置总数
    const [totalNum, setTotal] = useState(0);
    // 设置每页页数
    const [pageSize, setPageSize] = useState(20);
    
    useEffect(() => {
    fetchCaseList(false);
    }, []);
    
    const lookMoreGoods = () => {
    //自定义事件跳到另一个页面
    window.dispatchEvent(
    new CustomEvent('this_is_zidingyi_page', {
    detail: '_zidingyi_scene_',
    })
    );
    };
    
    const fetchCaseList = (loadMore) => {
    request({
    v: '1.0',
    api: 'xxxx.xxxx.xxx',
    data: {
    poolId,
    pageNo: dataOffset,
    pageSize,
    },
    dataType: 'originaljsonp',
    })
    .then((response) => {
    const lists = response.data;
    if (lists.length == 0) {
    setHasMore(false);
    return;
    }
    const { total } = response;
    let pageNum = response.pageNo;
    let myData = loadMore ? caseList.concat(lists) : lists;
    
    
    setTotal(total);
    setDataOffset(Number(pageNum) + 1);
    setHasMore(pageNum * pageSize < total);
    setCaseList(myData);
    })
    .catch((e) => {
    console.log(e, '接口请求失败...');
    Loading.show({
    content: '数据加载失败',
    });
    Loading.hide();
    setHasMore(false);
    });
    };
    
    const onEndReached = () => {
    if (hasMore) {
    fetchCaseList(true);
    }
    
    
    return (
    <ScrollView
    onEndReached={onEndReached}
    onEndReachedThreshold={10}
    showsVerticalScrollIndicator={false}
    className="item-card-with-imgs"
    style={
       {
    height: poolId && limitedCount === 0 ? window.innerHeight * 2 : '',
    paddingBottom: 70,
    }}
    >
    {(caseList || []).map((item, index) => (
    // eslint-disable-next-line react/no-array-index-key 
    // 传递数据到自定义的组件
    <Card key={`card_${index}`}  getList={fetchCaseList} />
    ))}
    {/* {hasMore && <div className="text">正在加载中...</div>} */}
    {hasMore && (
    <div className="text">
     <div>正在加载...</div> 
    )}
    {!hasMore && totalNum > pageSize && <div className="text">到底啦~</div>}
    {lookMore && (
    <div
    className="lookMoreContain"
    onClick={() => {
    lookMoreGoods();
    }}
    >
    <View className="lookMore">查看更多</View>
    </div>
    )}
    </ScrollView>
    );
    });

CSS

.item-card-with-imgs{
      -webkit-overflow-scrolling: touch !important;
    .loadMore {
     display: flex !important;
     justify-content: center !important;
     align-items: center !important;
     height: 30px !important;
     text-align: center !important;
    }
    .tip-text {
     margin: 10rpx !important;
     text-align: center !important;
     color: #fff !important;
    }
    .lookMoreContain{
     display: flex !important;
     justify-content: center !important;
     margin-top: 50rpx !important;
     height:48rpx !important;
    }
    .lookMore{
     height: 48rpx !important;
     line-height: 48rpx !important;
     width: 192rpx !important;
     border: 2rpx solid #E5C199 !important;
     border-radius: 27rpx !important;
     text-align: center !important;
     font-family: PingFangSC-Medium !important;
     font-size: 20rpx !important;
     color: #E5C199 !important;
     letter-spacing: 0 !important;
    }
    .rax-scrollview-vertical{
      height: none !important;
    }
    }

**使用注意事项：**

（1）以上是一个很简单的分页效果，只适用于单独一个页面的分页情况；

（2）ScrollView必须要设置高度；  
  
（3）如果存在拉取页面存在空页状况会出问题；（比如：第1，2，3，4页有数据，第5，6，7页没有数据，第8，9页拉取又开始有数据的情况）