1

project/mock/e-family/index.js

@@ -4,7 +4,7 @@ export const homeInfo = {
     {
         "canUpdateNickName": false,
         "figures": [{ "figureId": "1" }, { "figureId": "2" }, { "figureId": "3" }],
-        "newUser": 1,
+        "newUser": 0,
         "userInfo": { "figureId": "3", "joyBeans": 10100, "nickName": "13" }
     },
     "message": null,
@@ -85,7 +85,33 @@ export const signInfo = {
     "message": null,
     "success": true
 }
-export const pagelist = [{ "bizType": "SUB", "credits": 100, "description": "每日签到", "gmtCreate": "2020-12-22 17:02:07" }, { "bizType": "ADD", "credits": 10000, "description": "每日签到", "gmtCreate": "2020-12-22 17:01:17" }]
+const list=[]
+for(let i=1;i<=20;i++){
+    list.push({ "bizType": "SUB", "credits": 100, "description": `每日签到${i}`, "gmtCreate": "2020-12-22 17:02:07" })
+}
+
+const list2=[]
+for(let i=1;i<=5;i++){
+    list2.push({ "bizType": "SUB", "credits": 100, "description": `每日签到${i}`, "gmtCreate": "2020-12-22 17:02:07" })
+}
+const list3=[]
+
+export const pagelist = list
+// export const pagelist = [
+//     { "bizType": "SUB", "credits": 100, "description": "每日签到", "gmtCreate": "2020-12-22 17:02:07" }, { "bizType": "ADD", "credits": 10000, "description": "每日签到", "gmtCreate": "2020-12-22 17:01:17" },
+//     { "bizType": "SUB", "credits": 100, "description": "每日签到", "gmtCreate": "2020-12-22 17:02:07" }, { "bizType": "ADD", "credits": 10000, "description": "每日签到", "gmtCreate": "2020-12-22 17:01:17" },
+//     { "bizType": "SUB", "credits": 100, "description": "每日签到", "gmtCreate": "2020-12-22 17:02:07" }, { "bizType": "ADD", "credits": 10000, "description": "每日签到", "gmtCreate": "2020-12-22 17:01:17" },
+//     { "bizType": "SUB", "credits": 100, "description": "每日签到", "gmtCreate": "2020-12-22 17:02:07" }, { "bizType": "ADD", "credits": 10000, "description": "每日签到", "gmtCreate": "2020-12-22 17:01:17" },
+//     { "bizType": "SUB", "credits": 100, "description": "每日签到", "gmtCreate": "2020-12-22 17:02:07" }, { "bizType": "ADD", "credits": 10000, "description": "每日签到", "gmtCreate": "2020-12-22 17:01:17" },
+//     { "bizType": "SUB", "credits": 100, "description": "每日签到", "gmtCreate": "2020-12-22 17:02:07" }, { "bizType": "ADD", "credits": 10000, "description": "每日签到", "gmtCreate": "2020-12-22 17:01:17" },
+//     { "bizType": "SUB", "credits": 100, "description": "每日签到", "gmtCreate": "2020-12-22 17:02:07" }, { "bizType": "ADD", "credits": 10000, "description": "每日签到", "gmtCreate": "2020-12-22 17:01:17" },
+
+//     { "bizType": "SUB", "credits": 100, "description": "每日签到", "gmtCreate": "2020-12-22 17:02:07" },
+//     // { "bizType": "SUB", "credits": 100, "description": "每日签到", "gmtCreate": "2020-12-22 17:02:07" },
+
+//     { "bizType": "SUB", "credits": 100, "description": "每日签到", "gmtCreate": "2020-12-22 17:02:07" }, { "bizType": "ADD", "credits": 10000, "description": "每日签到", "gmtCreate": "2020-12-22 17:01:17" }
+
+// ]
 export const dosign = {
     "code": null,
     "data": {

project/src/app.jsx

@@ -15,7 +15,7 @@ class App extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      page: 'loading',
+      page: 'detail',
     };
   }
 

project/src/pages/detail2/detail2.jsx

@@ -5,33 +5,76 @@ import resList from '../../resconfig/resList'; //import API from '../../api';
 
 import './detail2.less';
 import API from '../../api';
+const pagesize = 20;
+const ratio = 2;
+const listWrapperHeight = document.body.clientHeight * ratio - 214;
+let canLoading = true;
+let currentPage = 1;
 class Detail2 extends Component {
   constructor(props) {
     super(props);
     this.state = {
       resList: resList,
+      list: []
+    };
+  }
 
-      list:[]
+  onScroll = () => {
+    if (!canLoading) {
+      console.log('不能加载了')
+      return;
     };
+    const { list } = this.state;
+    const targetScrollTop = list.length * 55 * ratio - listWrapperHeight;
+    const currentScrollTop = this.refs.listref.scrollTop * ratio;
+    if (currentScrollTop >= targetScrollTop) {
+      console.log('加载新数据');
+      canLoading = false;
+      this.loadPage();
+
+    }
+    // console.log(currentScrollTop, targetScrollTop)
+  }
+
+  loadPage() {
+    const { list } = this.state;
+    currentPage++;
+    API.pageList({
+      pageNo: currentPage,
+      pageSize: pagesize
+    }).then((res) => {
+      canLoading = true;
+      const list2 = list.concat(res);
+      this.setState({ list: list2 });
+
+      if (res.length < pagesize) {
+        canLoading = false;
+        console.log('加载好了，但数据太短了不继续加载了')
+      }
+    })
   }
 
   componentDidMount() {
     API.pageList({
-      pageNo:1,
-      pageSize:999999
+      pageNo: currentPage,
+      pageSize: pagesize
     }).then((res) => {
       console.log('pagelist ', res)
-      this.setState({list:res})
+      this.setState({ list: res })
+      if (res.length < pagesize) {
+        canLoading = false;
+        console.log('数据太短了不能滚了')
+      }
     })
   }
 
   render() {
-    const {list} = this.state
-    const list2 = list.map(i=>{
+    const { list } = this.state
+    const list2 = list.map(i => {
       return {
-        description:i.description,
-        gmtCreate:i.gmtCreate,
-        nums:i.bizType=='ADD' ? `+${i.credits}`: `-${i.credits}`
+        description: i.description,
+        gmtCreate: i.gmtCreate,
+        nums: i.bizType == 'ADD' ? `+${i.credits}` : `-${i.credits}`
       }
     })
     return (
@@ -44,19 +87,19 @@ class Detail2 extends Component {
             src={this.state.resList['9d6135a5-469f-4293-b931-17786c977974'].url}
           />
           <img onClick={() => this.props.navigateTo('mainpage')} className="detail2_back" uuid="detail2_back" src="//yun.duiba.com.cn/spark/assets/805d9455ffa59e37f0f0f19249959c3a9c458f96.png"></img>
-          <div className="detail2_item_list" uuid="3804f60d-697f-4d68-98b5-ca8cf2e2d3ba">
+          <div ref="listref" onScroll={this.onScroll} className="detail2_item_list" uuid="3804f60d-697f-4d68-98b5-ca8cf2e2d3ba">
             {
-              list2.map(({description,gmtCreate,nums},i) => (
+              list2.map(({ description, gmtCreate, nums }, i) => (
                 <div key={i} className="detail2_item " uuid="4d8289ea-9464-4a92-a81c-3e24c364e707">
                   <span className="detail2_item_title " uuid="48b63d65-a3d8-4b94-b979-3fcb19c9d89c">
                     {description}
                   </span>
                   <span className="detail2_item_day " uuid="5e6c50df-f25c-4b91-acc7-95d4829ff7db">
                     {gmtCreate}
-              </span>
+                  </span>
                   <span className="detail2_item_num " uuid="e576e938-d57d-4101-82bc-c0b0782033c9">
                     {nums}
-              </span>
+                  </span>
                   <img
                     className="detail2_item_bg "
                     uuid="46e8b6fd-f561-445c-85eb-be7136ea5183"

project/src/pages/detail2/detail2.less

@@ -48,7 +48,7 @@
         position: relative;
         box-sizing: border-box;
         width: 618px;
-        height: 109px;
+        height: 110px;
         .detail2_item_title {
           // width: 193px;
           // height: 23px;