rax+react hook 实现分页效果

'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页拉取又开始有数据的情况）

rax+react hook 实现分页效果相关推荐

react ajax 分页,React实现分页效果
本文实例为大家分享了React实现分页效果的具体代码,供大家参考,具体内容如下首先确保已经安装了antd,axios jsx文件: import React, { useState, useEffe ...
【笔记-node】《Egg.js框架入门与实战》、《用 React+React Hook+Egg 造轮子全栈开发旅游电商应用》
20210226-20210227:<Egg.js框架入门与实战> 课程地址:https://www.imooc.com/learn/1185 第一章课程导学 01-01 课程介绍一. ...
源码解析 React Hook 构建过程
2018 年的 React Conf 上 Dan Abramov 正式对外介绍了React Hook,这是一种让函数组件支持状态和其他 React 特性的全新方式,并被官方解读为这是下一个 5 年 R ...
React Hook基本使用踩坑指南
React因为提倡函数式编程,所以提出了Hook思想来增强函数组件的功能,以此来替代基于Class的组件.但是我们有可能从基于Class这样的实例化组件转向函数组件时思想还没有完全转过来,还是用基于实 ...
hook xposed 自定义类_【开始学习React Hook(1)】Hook之useState
react hook是react推出的一种特殊函数.这些函数可以让你在不创建react class的情况下依然可以使用react的一些特性(诸如目前react的钩子函数拥有的所有特性). 最常用的ho ...
React hook 中的数据获取
相关说明: 对于hook相关词不翻译,感觉翻译后怪怪的. effect hook 效果钩子,用于执行一些副作用例如获取数据 . state hook 状态钩子. 使用----------- 和 --- ...
slqite3库查询数据处理方式_绝活！十一个优质React Hook库, 收藏备用
本文字数:6539字预计阅读时间:18分钟建议阅读方式:收藏备用温馨提示:最近全国大幅降温,注意防寒保暖,开心跨年长按识别,后台回复 "电子书" 即可领取<JavaS ...
React Hook之Effect Hook
文章目录 Effect Hook概念性内容介绍: 如果朋友们想在里面进行异步操作的话请这样用[或者你可以把这个方法放到外面在这里调用即可]: 我们可以监听某个状态的变化来进行一些操作 useEffec ...
尝鲜用 React Hook + Parcel 构建真心话大冒险简单页面
首发于我的 Blog 阅读推荐:本人需要您有一定的 React 基础,并且想简单了解一下 Hook 的工作方式和注意点.但是并不详细介绍 React Hook,如果想有进一步的了解,可以查看官方文档. ...

rax+react hook 实现分页效果

rax+react hook 实现分页效果相关推荐

最新文章

热门文章