From 9846accf96368385abaefccbc54ae279ea15c02e Mon Sep 17 00:00:00 2001
From: pan <1029559041@qq.com>
Date: Thu, 21 May 2020 00:53:48 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=88=86=E9=A1=B5=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Page.tsx          | 21 +++++++++++++++++++++
 src/entity.ts         | 12 ++++++++++++
 src/sub/IndexMenu.tsx | 24 ++++++++----------------
 3 files changed, 41 insertions(+), 16 deletions(-)
 create mode 100644 src/Page.tsx

diff --git a/src/Page.tsx b/src/Page.tsx
new file mode 100644
index 0000000..cf3dc40
--- /dev/null
+++ b/src/Page.tsx
@@ -0,0 +1,21 @@
+import {PageForm} from "./entity";
+import React from "react";
+import {Pagination} from "react-bootstrap";
+
+/**
+ * 分页组件
+ */
+export class Page extends React.Component<PageForm, PageForm>{
+
+    render() {
+        return (
+            <Pagination className="justify-content-center">
+                {this.props.currentPage===1?<Pagination.First disabled/>:<Pagination.First/>}
+                {this.props.currentPage>1?<Pagination.Prev/>:<Pagination.Prev disabled/>}
+                <Pagination.Item active>{this.props.currentPage}</Pagination.Item>
+                {this.props.currentPage<this.props.totalPage?<Pagination.Next/>:<Pagination.Next disabled/>}
+                {this.props.currentPage===this.props.totalPage?<Pagination.Last disabled/>:<Pagination.Last/>}
+            </Pagination>
+        );
+    }
+}
diff --git a/src/entity.ts b/src/entity.ts
index 6b19c07..480a5ea 100644
--- a/src/entity.ts
+++ b/src/entity.ts
@@ -11,3 +11,15 @@ export interface ActiveForm {
     //活动图片
     activeImg:string;
 }
+
+/**
+ * 分页信息
+ */
+export interface PageForm {
+    //当前页
+    currentPage:number;
+    //总页数
+    totalPage:number;
+    //分页大小
+    pageSize:number;
+}
diff --git a/src/sub/IndexMenu.tsx b/src/sub/IndexMenu.tsx
index 61e2f33..335624c 100644
--- a/src/sub/IndexMenu.tsx
+++ b/src/sub/IndexMenu.tsx
@@ -1,6 +1,7 @@
 import React from "react";
-import {Container,Row,Col,Card,ListGroup,Button,Pagination} from "react-bootstrap";
+import {Container,Row,Col,Card,ListGroup,Button} from "react-bootstrap";
 import {ActiveForm} from "../entity";
+import {Page} from "../Page";
 /**
  * 首页
  */
@@ -15,7 +16,8 @@ export class IndexMenu extends React.Component<any, any>{
             activeList:[],
             page:{
                 currentPage:1,
-                totalPage:1
+                totalPage:3,
+                pageSize:9
             }
         }
     }
@@ -106,26 +108,16 @@ export class IndexMenu extends React.Component<any, any>{
         )
 
         return (
+
             <Container className="p-5">
-                <Pagination className="justify-content-center">
-                    {this.state.page.currentPage===1?<Pagination.First disabled/>:<Pagination.First/>}
-                    {this.state.page.currentPage-1>0?<Pagination.Prev/>:<Pagination.Prev disabled/>}
-                    <Pagination.Item active>{this.state.page.currentPage}</Pagination.Item>
-                    {this.state.page.currentPage+1<this.state.page.totalPage?<Pagination.Next/>:<Pagination.Next disabled/>}
-                    {this.state.page.currentPage===this.state.page.totalPage?<Pagination.Last disabled/>:<Pagination.Last/>}
-                </Pagination>
+                <Page  currentPage={this.state.page.currentPage} totalPage={this.state.page.totalPage} pageSize={this.state.page.pageSize}/>
 
                 <div>
                     {rowList}
                 </div>
 
-                <Pagination className="justify-content-center">
-                    {this.state.page.currentPage===1?<Pagination.First disabled/>:<Pagination.First/>}
-                    {this.state.page.currentPage-1>0?<Pagination.Prev/>:<Pagination.Prev disabled/>}
-                    <Pagination.Item active>{this.state.page.currentPage}</Pagination.Item>
-                    {this.state.page.currentPage+1<this.state.page.totalPage?<Pagination.Next/>:<Pagination.Next disabled/>}
-                    {this.state.page.currentPage===this.state.page.totalPage?<Pagination.Last disabled/>:<Pagination.Last/>}
-                </Pagination>
+                <Page  currentPage={this.state.page.currentPage} totalPage={this.state.page.totalPage} pageSize={this.state.page.pageSize}/>
+
             </Container>
         )
     }