add feature

alex3347 · Dec 4, 2017 · d95ebfa · d95ebfa
1 parent 4061bad
commit d95ebfa
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 5 deletions.
diff --git a/src/components/Tab/Tab.scss b/src/components/Tab/Tab.scss
@@ -9,7 +9,7 @@
     width:20%;
     height:102px;
     display: inline-block;
-    padding-top: 8px;
+    padding-top: 4px;
     text-align: center;
     vertical-align: top;
     i{

diff --git a/src/pages/HomeDetail/HomeDetail.js b/src/pages/HomeDetail/HomeDetail.js
@@ -3,7 +3,7 @@ import Header from './Header/Header';
 import {Link} from 'react-router-dom';
 import {connect} from 'react-redux';
 
-import {getMaster} from "actions/homeDetail/master";
+import {getMaster,loadMoreFn} from "actions/homeDetail/master";
 import {getList} from "actions/homeDetail/list";
 
 
@@ -13,6 +13,26 @@ class HomeDetail extends Component {
     componentDidMount(){
         this.props.getMaster();
         this.props.getList();
+        const loadMoreFn = this.props.loadMoreFn;
+        const wrapper = this.refs.wrapper;
+        let timeoutId;
+        function callback() {
+            const top = wrapper.getBoundingClientRect().top;
+            const windowHeight = window.screen.height;
+            if(top && top < windowHeight){
+                //当wrapper已经被滚动到页面的可视范围之内
+                loadMoreFn()
+            }
+        }
+        window.addEventListener('scroll',function () {
+            if(this.props.isLoadingMore){
+                return;
+            }
+            if(timeoutId){
+                clearTimeout(timeoutId)
+            }
+            timeoutId = setTimeout(callback,50)
+        }.bind(this),false)
     }
     render() {
         const {master} = this.props.master;
@@ -87,6 +107,9 @@ class HomeDetail extends Component {
                         })
                     }
                 </div>
+                <div className={styles.loading} ref='wrapper'>
+                    加载中...
+                </div>
             </div>
         )
     }
@@ -95,4 +118,4 @@ class HomeDetail extends Component {
 export default connect((state) => ({
     master: state.master,
     list: state.list
-}), {getMaster,getList})(HomeDetail);
+}), {getMaster,getList,loadMoreFn})(HomeDetail);
diff --git a/src/pages/HomeDetail/HomeDetail.scss b/src/pages/HomeDetail/HomeDetail.scss
@@ -211,3 +211,10 @@
     }
   }
 }
+.loading{
+  height:70px;
+  font-size: 30px;
+  color: #999;
+  text-align: center;
+  line-height:70px;
+}
diff --git a/src/redux/actions/homeDetail/list.js b/src/redux/actions/homeDetail/list.js
@@ -36,7 +36,6 @@ export function getList() {
                 return response.json()
             }))
             .then((json) => {
-            console.log(json)
                     dispatch(getListSuccess(json))
                 }
             ).catch(

diff --git a/src/redux/actions/homeDetail/master.js b/src/redux/actions/homeDetail/master.js
@@ -36,7 +36,6 @@ export function getMaster() {
                 return response.json()
             }))
             .then((json) => {
-            console.log(json)
                     dispatch(getMasterSuccess(json))
                 }
             ).catch(
@@ -45,4 +44,9 @@ export function getMaster() {
                 }
             )
     }
+}
+export function loadMoreFn() {
+    return function () {
+        console.log('success')
+    }
 }