首先建立一个单独的jsx文件里面
import React, { Component } from "react";
class Com extends React.Component {
constructor(props) {
super(props);
let { pageConfig } = props;
this.state = {
currentPage: Number(pageConfig.currentPage), //当前页码
groupCount: 5, //页码分组，显示7个页码，其余用省略号显示
startPage:
Number(pageConfig.currentPage) - 2 > 0
? Number(pageConfig.currentPage) - 2
: Number(pageConfig.currentPage), //分组开始页码
totalPage: pageConfig.totalPage, //总页数
};
}
createPage() {
const { currentPage, groupCount, startPage, totalPage } = this.state;
let pages = [];
//上一页
pages.push(
<li
className={currentPage === 1 ? "nomore" : null}
onClick={this.prePageHandeler.bind(this)}
key={0}
>
上一页
</li>
);
if (totalPage <= 10) {
/*总页码小于等于10时，全部显示出来*/
for (let i = 1; i <= totalPage; i++) {
pages.push(
<li
key={i}
onClick={this.pageClick.bind(this, i)}
className={currentPage === i ? "activePage" : null}
>
{i}
</li>
);
}
} else {
/*总页码大于10时，部分显示*/
//第一页
pages.push(
<li
className={currentPage === 1 ? "activePage" : null}
key={1}
onClick={this.pageClick.bind(this, 1)}
>
1
</li>
);
let pageLength = 0;
if (groupCount + startPage > totalPage) {
pageLength = totalPage;
} else {
pageLength = groupCount + startPage;
}
//前面省略号(当当前页码比分组的页码大时显示省略号)
if (currentPage >= groupCount) {
pages.push(
<li className="omission" key={-1}>
···
</li>
);
}
//非第一页和最后一页显示
for (let i = startPage; i < pageLength; i++) {
if (i <= totalPage - 1 && i > 1) {
pages.push(
<li
className={currentPage === i ? "activePage" : null}
key={i}
onClick={this.pageClick.bind(this, i)}
>
{i}
</li>
);
}
}
//后面省略号
if (totalPage - startPage >= groupCount + 1) {
pages.push(
<li className="omission" key={-2}>
···
</li>
);
}
//最后一页
pages.push(
<li
className={currentPage === totalPage ? "activePage" : null}
key={totalPage}
onClick={this.pageClick.bind(this, totalPage)}
>
{totalPage}
</li>
);
}
//下一页
pages.push(
<li
className={currentPage === totalPage ? "nomore" : null}
onClick={this.nextPageHandeler.bind(this)}
key={totalPage + 1}
>
下一页
</li>
);
return pages;
}
//页码点击
pageClick(currentPage) {
const { groupCount } = this.state;
const { getCurrentPage } = this.props;
//当 当前页码 大于 分组的页码 时，使 当前页 前面 显示 两个页码
if (currentPage >= groupCount) {
this.setState({
startPage: currentPage - 2,
});
}
if (currentPage < groupCount) {
this.setState({
startPage: 1,
});
}
//第一页时重新设置分组的起始页
if (currentPage === 1) {
this.setState({
startPage: 1,
});
}
this.setState({
currentPage,
});
// 缓存当前页码
sessionStorage.setItem("currentPage", encodeURIComponent(currentPage));
//将当前页码返回父组件
getCurrentPage(currentPage);
}
//上一页事件
prePageHandeler() {
let { currentPage } = this.state;
if (--currentPage === 0) {
return false;
}
this.pageClick(currentPage);
}
//下一页事件
nextPageHandeler() {
let { currentPage, totalPage } = this.state;
// const {totalPage} = this.props.pageConfig;
if (++currentPage > totalPage) {
return false;
}
this.pageClick(currentPage);
}
render() {
return (
<div className="page_container">
<ul>{this.createPage()}</ul>
</div>
);
}
}
export default Com;
其次在主页面
import React, { Component } from "react";
// import axios from "axios";
import { withRouter } from "react-router-dom";
import { observer, inject } from "mobx-react";
//这里引入的是上面那个jsx 名字位置可以随便放
import PageNav from "../../component/PageNav";
@withRouter
@inject("iu", "newobs")
@observer
class box extends Component {
constructor(props) {
super(props);
this.state = {
newIu: [],
Boor: true,
pageCfg: {
page_number: "1",
page_size: "10",
},
pageConfig: {
currentPage: "1",
totalPage: "31",
},
};
this.ajaxPage = this.ajaxPage.bind(this);
}
newobs = this.props.newobs;
ajaxPage(i) {
const { getApi } = this.newobs;
const { pageCfg } = this.state;
pageCfg.page_number = i.toString();
// let obj = {
// page_number: "1",
// page_size: "10",
// };
getApi("/home/mediareports", pageCfg, {}).then((res) => {
// console.log(res.data);
this.setState({
newIu: res.data.data,
Boor: false,
pageConfig: {
currentPage: i,
totalPage: Math.ceil(res.data.total / pageCfg.page_size),
},
});
});
}
componentDidMount() {
this.ajaxPage(this.state.pageConfig.currentPage);
}
_boor() {
if (this.state.Boor) {
return (
<div className="loading_box">
<div className="loading"></div>
</div>
);
} else {
const list = this.state.newIu.map((val) => (
<li key={val.id}>
<a href={val.jump_url}>{val.main_title}</a>
<span>{val.source}</span>
<span>{val.sourceData}</span>
</li>
));
return this.state.newIu.length !== 0 ? (
<ul>{list}</ul>
) : (
<div className="no_result">知恩，危险</div>
);
}
}
render() {
// pageConfig
const pageCfg = {
pageConfig: this.state.pageConfig,
getCurrentPage: this.ajaxPage,
};
return (
<React.Fragment>
<p>与你有的不是遗憾而是梦醒</p>
{this._boor()}
{this.state.newIu.length !== 0 ? <PageNav {...pageCfg} /> : ""}
</React.Fragment>
);
}
}
export default box;
因为请求的是ajax所以要在src文件夹中建立一个setupProxy.js文件
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/home',createProxyMiddleware({
target: 'https://home-api.pinduoduo.com/',
changeOrigin: true,
})
);
};
这里面用到了mobx
import {observable, computed, action, autorun,runInAction, makeObservable} from 'mobx';
import axios from 'axios';
export default class Iu {
@action
async getApi(url, cfg, headers) {
let data = await axios.get(
url,
{ params: cfg },
{
headers: headers,
}
);
return data;
}
}
css样式
@charset "UTF-8";
/**
使用方法
@include keyframes(anMeinv,(
0%:(
background: url(i/meinv.png) no-repeat pxToRem(140) pxToRem(11),
background-size: pxToRem(165) pxToRem(157)
),
50%:(
background: url(i/meinv.png) no-repeat pxToRem(140) pxToRem(11),
background-size: pxToRem(265) pxToRem(257)
),
75%:(
background: url(i/meinv.png) no-repeat pxToRem(140) pxToRem(11),
background-size: pxToRem(565) pxToRem(657)
),
100%:(
background: url(i/meinv.png) no-repeat pxToRem(140) pxToRem(11),
background-size: pxToRem(465) pxToRem(557)
)
));
@include animation(anMeinv 2s ease-out forwards);
*/
/**
使用方法
@include keyframes(anMeinv,(
0%:(
background: url(i/meinv.png) no-repeat pxToRem(140) pxToRem(11),
background-size: pxToRem(165) pxToRem(157)
),
50%:(
background: url(i/meinv.png) no-repeat pxToRem(140) pxToRem(11),
background-size: pxToRem(265) pxToRem(257)
),
75%:(
background: url(i/meinv.png) no-repeat pxToRem(140) pxToRem(11),
background-size: pxToRem(565) pxToRem(657)
),
100%:(
background: url(i/meinv.png) no-repeat pxToRem(140) pxToRem(11),
background-size: pxToRem(465) pxToRem(557)
)
));
@include animation(anMeinv 2s ease-out forwards);
*/
.page_container {
padding: 30px 0; }
.page_container ul {
text-align: center;
font-size: 0; }
.page_container ul li {
display: inline-block;
margin: 0 10px;
border: 1px solid #ccc;
height: 30px;
line-height: 30px;
box-sizing: border-box;
font-size: 14px;
padding: 0 10px;
cursor: pointer; }
.page_container ul li.activePage {
color: red;
border: 1px solid red;
text-align: center; }
.page_container ul li:first-child, .page_container ul li:last-child {
width: auto; }
.page_container ul li.nomore {
cursor: default;
color: #999; }
.page_container ul li.omission {
border: none;
margin: 0;
font-family: Arial; }
.loading_box {
height: auto; }
.loading_box .loading {
width: 100px;
height: 100px;
margin: 50px auto;
position: relative; }
.loading_box .loading:before {
content: "";
position: absolute;
display: block;
border: 5px solid #1c71ff;
opacity: .9;
width: 50px;
height: 50px;
left: 50%;
top: 50%;
margin: -25px 0 0 -25px;
border-top-color: transparent;
border-bottom-color: transparent;
border-radius: 50%;
-webkit-box-shadow: 0 0 35px #1c71ff;
-moz-box-shadow: 0 0 35px #1c71ff;
box-shadow: 0 0 35px #1c71ff;
-webkit-animation: spin-right 0.5s 0s linear infinite normal;
-moz-animation: spin-right 0.5s 0s linear infinite normal;
-ms-animation: spin-right 0.5s 0s linear infinite normal;
-o-animation: spin-right 0.5s 0s linear infinite normal;
animation: spin-right 0.5s 0s linear infinite normal; }
@-webkit-keyframes spin-right {
0% {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
opacity: 0.2; }
50% {
transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
opacity: 1; }
100% {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
opacity: 0.2; } }
@-moz-keyframes spin-right {
0% {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
opacity: 0.2; }
50% {
transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
opacity: 1; }
100% {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
opacity: 0.2; } }
@-ms-keyframes spin-right {
.loading_box .loading:before 0% {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
opacity: 0.2; }
.loading_box .loading:before 50% {
transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
opacity: 1; }
.loading_box .loading:before 100% {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
opacity: 0.2; } }
@-o-keyframes spin-right {
0% {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
opacity: 0.2; }
50% {
transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
opacity: 1; }
100% {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
opacity: 0.2; } }
@keyframes spin-right {
0% {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
opacity: 0.2; }
50% {
transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
opacity: 1; }
100% {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
opacity: 0.2; } }
.loading_box .loading:after {
content: "";
position: absolute;
display: block;
width: 30px;
height: 30px;
border: 5px solid #1c71ff;
opacity: .9;
border-radius: 50%;
border-left-color: transparent;
border-bottom-color: transparent;
-webkit-box-shadow: 0 0 35px #1c71ff;
-moz-box-shadow: 0 0 35px #1c71ff;
box-shadow: 0 0 35px #1c71ff;
left: 50%;
top: 50%;
margin: -15px 0 0 -15px;
-webkit-animation: spin-left 0.5s 0s linear infinite normal;
-moz-animation: spin-left 0.5s 0s linear infinite normal;
-ms-animation: spin-left 0.5s 0s linear infinite normal;
-o-animation: spin-left 0.5s 0s linear infinite normal;
animation: spin-left 0.5s 0s linear infinite normal; }
@-webkit-keyframes spin-left {
0% {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
opacity: 0.2; }
50% {
transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
opacity: 1; }
100% {
transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
opacity: 0.2; } }
@-moz-keyframes spin-left {
0% {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
opacity: 0.2; }
50% {
transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
opacity: 1; }
100% {
transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
opacity: 0.2; } }
@-ms-keyframes spin-left {
.loading_box .loading:after 0% {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
opacity: 0.2; }
.loading_box .loading:after 50% {
transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
opacity: 1; }
.loading_box .loading:after 100% {
transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
opacity: 0.2; } }
@-o-keyframes spin-left {
0% {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
opacity: 0.2; }
50% {
transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
opacity: 1; }
100% {
transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
opacity: 0.2; } }
@keyframes spin-left {
0% {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
opacity: 0.2; }
50% {
transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
opacity: 1; }
100% {
transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
opacity: 0.2; } }
.no_result {
text-align: center;
padding: 30px 0;
margin: 0 auto;
line-height: 40px;
font-size: 16px;
font-family: "微软雅黑"; }
.loadingBox {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 999; }
.loadingBox .loadingbg {
background: #fff;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 5; }
.loadingBox .loading {
position: absolute;
left: 50%;
top: 40%;
z-index: 6;
margin: 0 0 0 -20px;
position: relative;
overflow: hidden; }
