load-more

@@ -52,7 +52,7 @@
         </section>
         {{/ pageData.couponList}}
     </div>
-    <div class="no-conpon-now hide">
+    <div class="no-conpon-now">
         <div class="icon-not"></div>
         <p>暂无优惠券</p>
     </div>

@@ -6,7 +6,6 @@ class ConponController extends Page {
     constructor() {
         super();
 
-        this.status = 0;
         this.couponType = 'notuse';
         this.couponFilter = 0;
         this.page = 1;
@@ -16,13 +15,47 @@ class ConponController extends Page {
             filterItem: $('.filter-item'),
             showFilterBtn: $('.show-filter-btn'),
             couponList: $('#couponList'),
-            couponSection: $('.coupon-section')
+            couponSection: $('.coupon-section'),
+            noConponNow: $('.no-conpon-now')
         };
 
         this.view.filterBtn.on('click', this.tabChange.bind(this));
         this.view.showFilterBtn.on('click', this.showFilter.bind(this));
         this.view.filterItem.on('click', 'button', this.filterCoupons.bind(this));
         this.view.couponSection.on('click', '.show-intro-btn', this.showIntro.bind(this));
+
+        this.loading = false;
+        this.loadEnd = false;
+        this.beforeScroll = $(window).scrollTop(); // 滚动前位置记录
+        this.afterScroll; // 滚动后的位置
+        window.onscroll = () => {
+            if (this.loading || this.loadEnd) {
+                return;
+            }
+
+            setTimeout(() => {
+                this.afterScroll = $(window).scrollTop();
+
+                if (this.afterScroll - this.beforeScroll > 0) {
+                    window.requestAnimationFrame(() => {
+                        this.scrollHandler();
+                    });
+                }
+                this.beforeScroll = this.afterScroll;
+            }, 100);
+        };
+    }
+
+    /**
+     * 滚动处理
+     */
+    scrollHandler() {
+        let conponListHeight = this.view.couponList.height();
+
+        if ($(window).scrollTop() > conponListHeight * 0.6) {
+            this.isScrollLoad = true;
+            this.renderCoupons(true);
+        }
     }
 
     /**
@@ -42,22 +75,16 @@ class ConponController extends Page {
     }
 
     /**
-     * 渲染优惠券列表
-     */
-    renderCoupons() {
-        this.getCoupons().then(result => {
-            let couponValidHbsHtml = $(couponHbs(result));
-
-            couponValidHbsHtml.on('click', '.show-intro-btn', this.showIntro.bind(this));
-            this.view.couponList.html(couponValidHbsHtml);
-        });
-    }
-
-    /**
      * 获取优惠券
      */
-    getCoupons() {
-        return this.ajax({
+    renderCoupons(scroll) {
+        if (this.loading) {
+            return;
+        }
+
+        this.loading = true;
+        this.page++;
+        this.ajax({
             type: 'POST',
             url: '/home/coupons.json',
             dataType: 'json',
@@ -66,6 +93,30 @@ class ConponController extends Page {
                 filter: this.couponFilter,
                 page: this.page
             },
+        }).then(result => {
+            this.loading = false;
+
+            let noResult = !result || !result.length;
+
+            if (scroll && noResult) {
+                this.loadEnd = true;
+                return;
+            }
+
+            if (noResult) {
+                this.view.noConponNow.removeClass('hide');
+            } else {
+                this.view.noConponNow.addClass('hide');
+            }
+
+            let couponValidHbsHtml = $(couponHbs(result));
+
+            couponValidHbsHtml.on('click', '.show-intro-btn', this.showIntro.bind(this));
+            if (scroll) {
+                this.view.couponList.append(couponValidHbsHtml);
+            } else {
+                this.view.couponList.html(couponValidHbsHtml);
+            }
         });
     }
 
@@ -73,6 +124,9 @@ class ConponController extends Page {
      * tab 切换
      */
     tabChange(event) {
+        this.page = 0;
+        this.loadEnd = false;
+
         let itemClicked = $(event.currentTarget);
 
         if (itemClicked.hasClass('no-used')) {