本文实例为大家分享了React实现分页效果的具体代码,供大家参考,具体内容如下 首先确保已经安装了antd,axiOS jsx文件: import React, { useSt
本文实例为大家分享了React实现分页效果的具体代码,供大家参考,具体内容如下
首先确保已经安装了antd,axiOS
jsx文件:
import React, { useState, useEffect } from 'react'
import { Pagination } from 'antd';
import './loading.sCSS'
import Unit from '../hml'
const App = () => {
// 设置第几页
const [num, setNum] = useState(1)
// 获取的数据载体
const [data, setData] = useState([])
//刚才用挂载方法,二次获取不好用
useEffect(() => {
Unit.getapi2('/home/mediareports', {
// 数据页
page_number: num,
// 每页多少数据
page_size: 10
}, {}).then((res) => {
//获取数据
setData(res.data.data)
})
}, [num])
const add = (e) => {
//每次点击向前翻一页
setNum(e)
}
return (
<>
<ul>
{}
{
data.map((item,index)=>{
return <a href={item.jump_url} key={index}><br />
{
item.main_title
}
</a>
})
}
</ul>
{}
<Pagination defaultCurrent={num} total={500} onChange={(e)=>add(e)}/>
</>
)
}
export default App
loading.scss文件:
// antd没有样式,下面代码可以解决这个问题
@import '~antd/dist/antd.css';
hml.js:(这就是我发的那个axios封装)
import axios from 'axios';
const Unit = {
async getApi(ajaxCfg){
let data = await axios.get(ajaxCfg.url,{params:ajaxCfg.cfg},
{
headers: ajaxCfg.headers
})
return data;
},
async getApi2(url,cfg,headers){
let data = await axios.get(url,{params:cfg},
{
headers: headers
})
return data;
},
async postApi(url,cfg,headers){
let fd = new FORMData();
for(let key in cfg){
fd.append(key, cfg[key]);
}
let data = await axios.post(url,fd,
{
headers: headers
})
return data;
},
async putApi(url,cfg,headers){
// import qs from 'qs';
// let data = await axios.put(url,qs.stringify(cfg),{
// headers: {
// 'Content-Type':'application/x-www-form-urlencoded',
// }
// })
// return data;
},
async requestApi(cfg,headers,file){
let fd = new FormData();
fd.append('param', JSON.stringify(cfg));
if(file){
// 上传证明
if(file.length){
for(let i=0,len=file.length;i<len;i++){
fd.append('files', file[i]);
}
}else {
// 单个上传
for(let key in file){
fd.append(key, file[key]);
}
}
}
let data = await axios.post('/batch',fd,
{
headers: headers
})
return data;
}
}
export default Unit;
setupProxy.js:
--结束END--
本文标题: React实现分页效果
本文链接: https://www.lsjlt.com/news/127455.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0