滚动加载更多我的好友、我的留言

package.json

@@ -3,7 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.9.14",
+    "@material-ui/core": "^4.10.0",
+    "@material-ui/lab": "^4.0.0-alpha.54",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",

src/my/MyFriend.tsx

@@ -8,8 +8,9 @@ import {MyDialog} from "../ui/MyDialog";
 import {userObj} from "../ui/TestData";
 import {JSONResponse, Method, request} from "../interface";
 import {EmptyBodyTransform, PageDataMessage, SimpleMessage, UserRes, UserTransform} from "../result";
-import {loadMyFriend} from "../public";
+import {loadMyFriend, scrollBottom} from "../public";
 import {Api} from "../api";
+import {SimpleSnackbar} from "../ui/toast";
 
 const maxLength=150
 /**
@@ -17,7 +18,6 @@ const maxLength=150
  */
 export class MyFriend extends React.Component<
     { user:string },
-
     {
     //好友列表
     friendList?:Array<User>;
@@ -37,8 +37,10 @@ export class MyFriend extends React.Component<
     userId:string|null;
     //操作反馈
     result:JSX.Element|null;
-    //
+    //分页信息
     page?:PageProps;
+    //滚动提示
+    scrollTip:string|null,
 }
 >{
 
@@ -59,7 +61,8 @@ export class MyFriend extends React.Component<
             //发送内容
             sendContent:'',
             userId:null,
-            result:null
+            result:null,
+            scrollTip:null
         }
     }
 
@@ -137,20 +140,18 @@ export class MyFriend extends React.Component<
     }
 
     render() {
-
+        const that=this
         return (
             <Container>
                 <Row className="d-flex justify-content-center bg-light">
                     <div>
-                        <ListGroup className="overflow-auto bg-light friend-list" onScroll={(e:any)=> {
+                        <ListGroup className="overflow-auto bg-light friend-list" onScroll={(e:any)=>scrollBottom(e,that,function () {
-                                if (e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight) {
+                                loadMyFriend(that.state.queryFriend,that,(that.state.page?.currentPage||1)+1)
-                                    console.log('到达底部')
+                            })
-                                }
-                             }
                         }>
                             <ListGroup.Item variant="primary">我的好友</ListGroup.Item>
                             <ListGroup.Item>
-                                <FormControl placeholder="查找好友" onChange={(e)=>{
+                                <FormControl value={this.state.queryFriend} placeholder="查找好友" onChange={(e)=>{
                                     this.setState({
                                         queryFriend:e.target.value
                                     })
@@ -175,6 +176,8 @@ export class MyFriend extends React.Component<
                                         </Tooltip>
                                     </ListGroup.Item>
                                 ):null}
+
+                            {this.state.scrollTip!==null?<SimpleSnackbar message={this.state.scrollTip} onClose={()=>this.setState({scrollTip:null})} duration={1000}/>:null}
                         </ListGroup>
 
                         <ListGroup className="overflow-auto bg-light friend-list">

src/my/MyLeaveWord.tsx

@@ -1,15 +1,16 @@
 import React from "react";
 import {Button, Col, Container, Image, Row} from "react-bootstrap";
-import {ActivityStatus, LeaveWord, LeaveWordType} from "../entity";
+import {ActivityStatus, LeaveWord, LeaveWordType, PageProps} from "../entity";
 import {Tooltip} from "@material-ui/core";
 import {MyDialog} from "../ui/MyDialog";
 import {MyInfo} from "./MyInfo";
 import {Activity} from "../ui/Activity";
 import {JSONResponse, Method, request} from "../interface";
 import {EmptyBodyTransform, LeaveWordRes, LeaveWordTransform, PageDataMessage, SimpleMessage} from "../result";
-import {changeActivity} from "../public";
+import {changeActivity, scrollBottom} from "../public";
 import {Cookies} from "react-cookie";
 import {Api, prefix} from "../api";
+import {SimpleSnackbar} from "../ui/toast";
 
 /**
  * 我的留言
@@ -27,9 +28,11 @@ export class MyLeaveWord extends React.Component<
     //用户id
     userId?:string;
     //活动详情
-    activityId:number|null,
+    activityId:number|null;
     //加载提示
-    result:JSX.Element|null
+    result:JSX.Element|null;
+    scrollTip:string|null,
+    page?:PageProps
 }>{
 
 
@@ -40,7 +43,8 @@ export class MyLeaveWord extends React.Component<
             result: null,
             activityId: null,
             data:[],
-            openUserInfo:false
+            openUserInfo:false,
+            scrollTip:null
         }
     }
 
@@ -48,6 +52,7 @@ export class MyLeaveWord extends React.Component<
         this.loadLeaveWord(1)
     }
 
+
     /**
      * 加载留言
      */
@@ -59,8 +64,12 @@ export class MyLeaveWord extends React.Component<
             switch (res.customResult) {
                 case PageDataMessage.ok:
                         that.setState({
-                        data:res.dataList
+                            data: (that.state.data||[]).concat(res.dataList||[]),
-                    });break
+                            page: res.page,
+                            scrollTip: page > 1 ? '成功加载第' + page + '页数据' : null,
+                        })
+
+                    break
                 case PageDataMessage.fail:
                     that.setState({
                         result:<h3 className="text-danger text-center">留言列表加载失败</h3>
@@ -193,8 +202,11 @@ export class MyLeaveWord extends React.Component<
     }
 
     render() {
+        let that=this
         return (
-            <div className="overflow-auto my-leave-world-height">
+            <div className="overflow-auto my-leave-world-height" onScroll={e=>scrollBottom(e,that,function () {
+                that.loadLeaveWord((that.state.page?.currentPage||1)+1)
+            })}>
                 {this.state.data?this.state.data.length===0?<h3 className="text-info text-center">没有留言记录</h3>:this.state.data.map((data,index) =>this.getData(data,index)):<h3 className="text-info text-center">留言加载中</h3>}
                 <MyDialog titleId="view-user" menuName="用户信息"
                           content={<MyInfo isOwn={false}  isAdd={false} userId={this.state.userId?this.state.userId:""}/>}
@@ -212,6 +224,10 @@ export class MyLeaveWord extends React.Component<
                 <MyDialog content={this.state.result} open={this.state.result!==null} titleId="my_leave_word_dialog" menuName="提示" onClose={()=>this.setState({
                     result:null
                 })}/>
+
+                {this.state.scrollTip!==null?<SimpleSnackbar message={this.state.scrollTip} onClose={()=>this.setState({scrollTip:null})} duration={1000}/>:null}
+
+
             </div>
         )
     }

src/public.tsx

@@ -52,9 +52,36 @@ export function getStatus(status:ActivityStatus){
     }
 }
 
+/**
+ * 滚动到底部
+ * @param e 滚动事件
+ * @param that
+ * @param callback 回调函数
+ */
+export function scrollBottom(e:any,that:React.Component<any,any>,callback:Function) {
+    if (e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight) {
+
+        if(that.state.page){
+            if(that.state.page.currentPage===that.state.page.totalPage){
+                that.setState({
+                    scrollTip:'已滚动到底部',
+                })
+            }else{
+                that.setState({
+                    scrollTip:'尝试加载更多留言',
+                })
+                callback()
+            }
+        }else{
+            that.setState({
+                scrollTip:'丢失分页数据，请联系管理员',
+            })
+        }
+    }
+}
 
 //查找我的好友
-export function loadMyFriend(name:string,that:React.Component,page:number){
+export function loadMyFriend(name:string,that:React.Component<any,any>,page:number){
     request(Api.account.myFriend,Method.GET, {
         currentPage:String(page),
         name:name
@@ -62,7 +89,9 @@ export function loadMyFriend(name:string,that:React.Component,page:number){
         switch (res.customResult) {
             case PageDataMessage.ok:
                 that.setState({
-                    friendList:res.dataList
+                    friendList: (that.state.friendList||[]).concat(res.dataList||[]),
+                    page: res.page,
+                    scrollTip: page > 1 ? '成功加载第' + page + '页数据' : null,
                 })
                 break
             case PageDataMessage.fail:

src/ui/toast.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import Snackbar from '@material-ui/core/Snackbar';
+import {Image} from "react-bootstrap";
+import MuiAlert, {AlertProps} from '@material-ui/lab/Alert';
+
+function Alert(props: AlertProps) {
+    return <MuiAlert elevation={6} variant="filled" {...props} />;
+}
+
+export function SimpleSnackbar(props:Readonly<{message:string;duration:number;onClose:Function }>) {
+
+
+    const [open, setOpen] = React.useState(true);
+
+    const handleClose = (event: React.SyntheticEvent | React.MouseEvent, reason?: string) => {
+        if (reason === 'clickaway') {
+            return;
+        }
+
+        setOpen(false);
+
+        props.onClose()
+    };
+
+    return (
+            <Snackbar
+                open={open}
+                autoHideDuration={props.duration}
+                onClose={handleClose}
+                action={
+                    <React.Fragment>
+                        <Image className="closeIcon20" src="close.svg" onClick={handleClose}/>
+                    </React.Fragment>
+                }
+            >
+                <Alert  severity="success" onClick={handleClose}>
+                    {props.message}
+                </Alert>
+            </Snackbar>
+    );
+}

yarn.lock

@@ -1241,13 +1241,13 @@
     "@types/yargs" "^15.0.0"
     chalk "^3.0.0"
 
-"@material-ui/core@^4.9.14":
+"@material-ui/core@^4.10.0":
-  version "4.9.14"
+  version "4.10.0"
-  resolved "https://registry.npm.taobao.org/@material-ui/core/download/@material-ui/core-4.9.14.tgz#4388f82cf94554cd3a935774fc12820f3c607a8a"
+  resolved "https://registry.npm.taobao.org/@material-ui/core/download/@material-ui/core-4.10.0.tgz#e214e8f7981ff7975a918404b94508418642e463"
-  integrity sha1-Q4j4LPlFVM06k1d0/BKCDzxgeoo=
+  integrity sha1-4hTo95gf95dakYQEuUUIQYZC5GM=
   dependencies:
     "@babel/runtime" "^7.4.4"
-    "@material-ui/styles" "^4.9.14"
+    "@material-ui/styles" "^4.10.0"
     "@material-ui/system" "^4.9.14"
     "@material-ui/types" "^5.1.0"
     "@material-ui/utils" "^4.9.12"
@@ -1259,10 +1259,21 @@
     react-is "^16.8.0"
     react-transition-group "^4.4.0"
 
-"@material-ui/styles@^4.9.14":
+"@material-ui/lab@^4.0.0-alpha.54":
-  version "4.9.14"
+  version "4.0.0-alpha.54"
-  resolved "https://registry.npm.taobao.org/@material-ui/styles/download/@material-ui/styles-4.9.14.tgz#0a9e93a2bf24e8daa0811411a6f3dabdafbe9a07"
+  resolved "https://registry.npm.taobao.org/@material-ui/lab/download/@material-ui/lab-4.0.0-alpha.54.tgz#f359fac05667549353e5e21e631ae22cb2c22996"
-  integrity sha1-Cp6Tor8k6NqggRQRpvPava++mgc=
+  integrity sha1-81n6wFZnVJNT5eIeYxriLLLCKZY=
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@material-ui/utils" "^4.9.6"
+    clsx "^1.0.4"
+    prop-types "^15.7.2"
+    react-is "^16.8.0"
+
+"@material-ui/styles@^4.10.0":
+  version "4.10.0"
+  resolved "https://registry.npm.taobao.org/@material-ui/styles/download/@material-ui/styles-4.10.0.tgz#2406dc23aa358217aa8cc772e6237bd7f0544071"
+  integrity sha1-JAbcI6o1gheqjMdy5iN71/BUQHE=
   dependencies:
     "@babel/runtime" "^7.4.4"
     "@emotion/hash" "^0.8.0"