'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;// 數(shù)據(jù) const [caseList, setCaseList] = useState([]); // 更多 const [hasMore, setHasMore] = useState(false); // 當(dāng)前頁 const [dataOffset, setDataOffset] = useState(1); // 設(shè)置總數(shù) const [totalNum, setTotal] = useState(0); // 設(shè)置每頁頁數(shù) const [pageSize, setPageSize] = useState(20);useEffect(() => { fetchCaseList(false); }, []);const lookMoreGoods = () => { //自定義事件跳到另一個(gè)頁面 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: '數(shù)據(jù)加載失敗', }); 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 // 傳遞數(shù)據(jù)到自定義的組件 <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; } }

使用注意事項(xiàng)：

（1）以上是一個(gè)很簡單的分頁效果，只適用于單獨(dú)一個(gè)頁面的分頁情況；

（2）ScrollView必須要設(shè)置高度；

（3）如果存在拉取頁面存在空頁狀況會出問題；（比如：第1，2，3，4頁有數(shù)據(jù)，第5，6，7頁沒有數(shù)據(jù)，第8，9頁拉取又開始有數(shù)據(jù)的情況）

總結(jié)

以上是生活随笔為你收集整理的rax+react hook 实现分页效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。