筛选列表上拉加载

@@ -74,7 +74,6 @@ function filter(req, res, next) {
 function searchList(req, res, next) {
     let params = Object.assign({}, req.query);
 
-    console.log(params);
     req.ctx(GroupService).filterGroupList(params)
         .then(result => {
             return res.render('group/search-list', {

@@ -116,13 +116,15 @@ class GroupService extends global.yoho.BaseModel {
     async filterGroupList(params) {
         const initParams = {
             page: 1,
-            limit: 20,
+            limit: 15,
             joinLimit: 1
         };
         let newParams = {
             ...initParams,
             ...params
         };
+
+        console.log(newParams);
         const result = await this.api._getPromoteList(newParams);
         let finalResult = {};
 

@@ -37,14 +37,15 @@
             {{> group/resources/filter-tab}}
 
         </div>
-        {{#if filterList.length}}
-        <div class="group-list">
-            {{#each filterList}}
-            {{> group/resources/filter-list-item}}
-            {{/each}}
+        <div id="goodsContainer">
+            {{#if filterList.length}}
+            <div class="goods-list">
+                {{#each filterList}}
+                {{> group/resources/filter-list-item}}
+                {{/each}}
+            </div>
+            {{/if}}
         </div>
-        {{/if}}
-
         {{!-- {{> group/resources/filter-page}} --}}
     </div>
     <a class="bottom" href="/activity/group/order">我的拼团</a>

-<div class="group-product-cell-bg" data-group-product="{{group_product}}" data-item-idx="{{itemIdx}}">
+<div class="group-product-cell" data-group-product="{{group_product}}" data-item-idx="{{itemIdx}}">
     <div class="group-product-header">
         <div class="group-product-left-icon">
             <span class="group-product-left-icon-number">{{people_num}}人团</span>

@@ -6,9 +6,10 @@ import filter from 'js/plugin/filter';
 let innerScroll = require('js/plugin/inner-scroll');
 
 // import lazyLoad from 'yoho-jquery-lazyload';
-import tip from 'js/plugin/tip';
+// import tip from 'js/plugin/tip';
 import loading from 'js/plugin/loading';
 
+
 class Group extends Page {
     constructor() {
         super();
@@ -18,32 +19,33 @@ class Group extends Page {
             floorsContentHeight: $('.floors').height(),
             groupTab: $('.group-tab'),
             filterTab: $('.filter-nav'),
-            groupListContent: $('.group-list')
+            groupListContent: $('.goods-list')
         };
         this.navInfo = {
             new: {
                 order: 's_t_desc',
-                reload: true,
-                page: 1,
-                end: false
+                reload: true, // 是否重新加载
+                isScrollLoad: false, // 是否是滚动加载
+                page: 0,
+                end: false // 是否继续请求数据
             },
             popularity: {
                 order: 'h_v_desc',
                 reload: true,
+                isScrollLoad: false,
                 page: 0,
                 end: false
             },
             price: {
                 order: 's_p_asc',
                 reload: true,
+                isScrollLoad: false,
                 page: 0,
                 end: false
             }
         };
         this.noResult = '<p class="no-result">未找到相关搜索结果</p>';
-
-
-
+        this.defaultLimit = 15;
         this.selectedChannel = 'newGroup';
         this.filterTab = {
             newGroup: {
@@ -64,10 +66,22 @@ class Group extends Page {
         this.bindEvents();
         this.swiperTop();
         this.filterInit();
-        $(window).scroll(() => {
-            window.requestAnimationFrame(this.scrollHandler.bind(this));
+        let self = this;
+
+        $(window).scroll(function() {
+            window.requestAnimationFrame(() => {
+                self.scrollHandler();
+            });
+
+            setTimeout(function() {
+                window.requestAnimationFrame(() => {
+                    self.scrollListHandler();
+                });
+            }, 5);
+
         });
     }
+
     scrollHandler() {
         // 滚动固定tab
         let floorsContentHeight = this.selector.floorsContentHeight + 5;
@@ -80,6 +94,22 @@ class Group extends Page {
             this.selector.groupListContent.removeClass('mrt');
         }
     }
+    scrollListHandler() {
+        // 当scroll到1/2$goodsContainer高度后继续请求下一页数据
+        let floorsContentHeight = this.selector.floorsContentHeight + 5;
+        let goodsContainerHeight = this.selector.groupListContent.height();
+        let navType = this.judgeType(this.filterTab[this.selectedChannel].$pre);
+        let nav = this.navInfo[navType];
+
+        if (($(window).scrollTop() - floorsContentHeight) > goodsContainerHeight * 0.6) {
+            nav.reload = false;
+            nav.isScrollLoad = true;
+            console.log('load');
+            if (!nav.end) {
+                this.search();
+            }
+        }
+    }
     bindEvents() {
         this.selector.tabSection.on('click', this.fixedTab.bind(this));
         this.selector.groupTab.on('click', this.groupTabChange.bind(this));
@@ -126,6 +156,9 @@ class Group extends Page {
                     return;
                 }
                 nav.reload = true;
+                nav.end = false;
+                nav.isScrollLoad = false;
+                nav.page = 0;
                 nav.order = $this.data('order');
                 this.filterTab[currentChannel].order = nav.order;
             }
@@ -134,6 +167,9 @@ class Group extends Page {
             if ($this.hasClass('price')) {
                 $this.find('.icon > .iconfont').toggleClass('cur');
                 nav.reload = true;
+                nav.end = false;
+                nav.isScrollLoad = false;
+                nav.page = 0;
                 nav.order = nav.order === 's_p_asc' ? 's_p_desc' : 's_p_asc'; // 切换排序
                 this.filterTab[currentChannel].order = nav.order;
             }
@@ -167,8 +203,9 @@ class Group extends Page {
         for (let i in navInfo) {
             if (navInfo.hasOwnProperty(i)) {
                 navInfo[i].reload = true;
+                navInfo[i].isScrollLoad = false;
                 navInfo[i].end = false;
-
+                navInfo[i].page = 0;
                 if (i === 'price') {
                     navInfo[i].order = 's_p_asc';
                 }
@@ -214,6 +251,23 @@ class Group extends Page {
         }
     }
 
+    // 判断导航类型
+    judgeType(dom) {
+        let navType;
+
+        if (dom.hasClass('new')) {
+            navType = 'new';
+        } else if (dom.hasClass('popularity')) {
+            navType = 'popularity';
+        } else if (dom.hasClass('price')) {
+            navType = 'price';
+        } else {
+            navType = 'other';
+        }
+
+        return navType;
+    }
+
     //
     /**
      * 筛选注册的回调，筛选子项点击后逻辑
@@ -221,17 +275,35 @@ class Group extends Page {
      * @param opt
      */
     search() {
+        let groupListContent = this.selector.groupListContent;
         let params = {
             ...this.filterTab[this.selectedChannel]
         };
         let pageParams = this.filterPage[this.selectedChannel];
-        let groupListContent = this.selector.groupListContent;
+        let nav;
+        let navType;
+        let page;
+        let that = this;
 
         delete params.$pre;
 
         console.log('searchParam', params);
         console.log('pageParams', this.filterPage[this.selectedChannel]);
 
+        // 导航类别
+        navType = this.judgeType(this.filterTab[this.selectedChannel].$pre);
+        nav = this.navInfo[navType];
+        page = nav.page + 1;
+        if (nav.reload) {
+            page = 1;
+        }
+        nav.page = page;
+        console.log('nav', nav);
+        if (nav.end) {
+            // 不需要重新加载并且数据请求结束
+            return false;
+        }
+
         loading.showLoadingMask();
 
         $.ajax({
@@ -239,19 +311,62 @@ class Group extends Page {
             url: '/activity/group/search',
             data: {
                 ...params,
-                ...pageParams
+                ...pageParams,
+                page
             },
-            success: function(data) {
-                console.log(data);
-                groupListContent.html(data);
-                loading.hideLoadingMask();
+            beforeSend: () => {
+                if ($('.search-divide').length > 0) {
+                    $('.search-divide').remove();
+                }
+
+                groupListContent.after(() => {
+                    return '<div class="search-divide">正在加载...</div>';
+                });
             },
-            error: function() {
-                tip.show('网络断开连接了~');
-                loading.hideLoadingMask();
+            success: (data) => {
+                that.dataRender(data, nav);
+            },
+            error: () => {
+                let $divide = $('.search-divide');
+
+                $divide.text('加载失败，点击重试');
+                $divide.one('click', () => {
+                    $divide.text('正在加载...');
+                    this.search();
+                });
             }
         });
+    }
+    dataRender(result, curNav) {
+        // 去掉正在加载
+        $('.search-divide').remove();
+
+        let isResult = !result || !result.length ||
+            result.length < 1 ||
+            (result.list && result.list.length < 1);
+
+        let groupListContent = this.selector.groupListContent;
+
+        // 没有结果输出没有结果页面
+        if (isResult) {
+            if (curNav.isScrollLoad && !curNav.reload) {
+                groupListContent.after(() => {
+                    return '<div class="search-divide">没有更多内容了...</div>';
+                });
+            } else {
+                groupListContent.html('<div>未查询到数据！</div>');
+            }
 
+            curNav.end = true;
+            console.log('curNav', curNav);
+            return false;
+        } else {
+            if (curNav.isScrollLoad && !curNav.reload) {
+                groupListContent.append(result);
+            } else {
+                groupListContent.html(result);
+            }
+        }
     }
 
     // 筛选初始化

@@ -101,6 +101,7 @@ class ProductListLoader {
         }
         let catchKey = this.url + '?' + $.param(this.defaultOpt);
 
+        console.log(this.defaultOpt);
         if (!this.isLoadMore) {
             return false;
         }

-.group-list {
+.goods-list {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: space-between;
     margin-left: 20px;
     margin-right: 20px;
-    margin-bottom: 100px;
 }
 
 .group-product-image {
@@ -13,7 +12,7 @@
     height: 430px;
 }
 
-.group-product-cell-bg {
+.group-product-cell {
     margin-top: 20px;
 }
 

@@ -79,4 +79,12 @@
         z-index: 998;
         background-color: #fff;
     }
+
+    .search-divide {
+        height: 50px;
+        width: 100%;
+        padding: 10px 0;
+        color: #ccc;
+        text-align: center;
+    }
 }