rax+react hook 实现分页效果
生活随笔
收集整理的這篇文章主要介紹了
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 实现分页效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 贴贴贴贴app怎么玩
- 下一篇： 山海镜花琅琊斗擂段位共分为几段 如何解读