Authored by 郭成尧

load-more

@@ -52,7 +52,7 @@ @@ -52,7 +52,7 @@
52 </section> 52 </section>
53 {{/ pageData.couponList}} 53 {{/ pageData.couponList}}
54 </div> 54 </div>
55 - <div class="no-conpon-now hide"> 55 + <div class="no-conpon-now">
56 <div class="icon-not"></div> 56 <div class="icon-not"></div>
57 <p>暂无优惠券</p> 57 <p>暂无优惠券</p>
58 </div> 58 </div>
@@ -6,7 +6,6 @@ class ConponController extends Page { @@ -6,7 +6,6 @@ class ConponController extends Page {
6 constructor() { 6 constructor() {
7 super(); 7 super();
8 8
9 - this.status = 0;  
10 this.couponType = 'notuse'; 9 this.couponType = 'notuse';
11 this.couponFilter = 0; 10 this.couponFilter = 0;
12 this.page = 1; 11 this.page = 1;
@@ -16,13 +15,47 @@ class ConponController extends Page { @@ -16,13 +15,47 @@ class ConponController extends Page {
16 filterItem: $('.filter-item'), 15 filterItem: $('.filter-item'),
17 showFilterBtn: $('.show-filter-btn'), 16 showFilterBtn: $('.show-filter-btn'),
18 couponList: $('#couponList'), 17 couponList: $('#couponList'),
19 - couponSection: $('.coupon-section') 18 + couponSection: $('.coupon-section'),
  19 + noConponNow: $('.no-conpon-now')
20 }; 20 };
21 21
22 this.view.filterBtn.on('click', this.tabChange.bind(this)); 22 this.view.filterBtn.on('click', this.tabChange.bind(this));
23 this.view.showFilterBtn.on('click', this.showFilter.bind(this)); 23 this.view.showFilterBtn.on('click', this.showFilter.bind(this));
24 this.view.filterItem.on('click', 'button', this.filterCoupons.bind(this)); 24 this.view.filterItem.on('click', 'button', this.filterCoupons.bind(this));
25 this.view.couponSection.on('click', '.show-intro-btn', this.showIntro.bind(this)); 25 this.view.couponSection.on('click', '.show-intro-btn', this.showIntro.bind(this));
  26 +
  27 + this.loading = false;
  28 + this.loadEnd = false;
  29 + this.beforeScroll = $(window).scrollTop(); // 滚动前位置记录
  30 + this.afterScroll; // 滚动后的位置
  31 + window.onscroll = () => {
  32 + if (this.loading || this.loadEnd) {
  33 + return;
  34 + }
  35 +
  36 + setTimeout(() => {
  37 + this.afterScroll = $(window).scrollTop();
  38 +
  39 + if (this.afterScroll - this.beforeScroll > 0) {
  40 + window.requestAnimationFrame(() => {
  41 + this.scrollHandler();
  42 + });
  43 + }
  44 + this.beforeScroll = this.afterScroll;
  45 + }, 100);
  46 + };
  47 + }
  48 +
  49 + /**
  50 + * 滚动处理
  51 + */
  52 + scrollHandler() {
  53 + let conponListHeight = this.view.couponList.height();
  54 +
  55 + if ($(window).scrollTop() > conponListHeight * 0.6) {
  56 + this.isScrollLoad = true;
  57 + this.renderCoupons(true);
  58 + }
26 } 59 }
27 60
28 /** 61 /**
@@ -42,22 +75,16 @@ class ConponController extends Page { @@ -42,22 +75,16 @@ class ConponController extends Page {
42 } 75 }
43 76
44 /** 77 /**
45 - * 渲染优惠券列表  
46 - */  
47 - renderCoupons() {  
48 - this.getCoupons().then(result => {  
49 - let couponValidHbsHtml = $(couponHbs(result));  
50 -  
51 - couponValidHbsHtml.on('click', '.show-intro-btn', this.showIntro.bind(this));  
52 - this.view.couponList.html(couponValidHbsHtml);  
53 - });  
54 - }  
55 -  
56 - /**  
57 * 获取优惠券 78 * 获取优惠券
58 */ 79 */
59 - getCoupons() {  
60 - return this.ajax({ 80 + renderCoupons(scroll) {
  81 + if (this.loading) {
  82 + return;
  83 + }
  84 +
  85 + this.loading = true;
  86 + this.page++;
  87 + this.ajax({
61 type: 'POST', 88 type: 'POST',
62 url: '/home/coupons.json', 89 url: '/home/coupons.json',
63 dataType: 'json', 90 dataType: 'json',
@@ -66,6 +93,30 @@ class ConponController extends Page { @@ -66,6 +93,30 @@ class ConponController extends Page {
66 filter: this.couponFilter, 93 filter: this.couponFilter,
67 page: this.page 94 page: this.page
68 }, 95 },
  96 + }).then(result => {
  97 + this.loading = false;
  98 +
  99 + let noResult = !result || !result.length;
  100 +
  101 + if (scroll && noResult) {
  102 + this.loadEnd = true;
  103 + return;
  104 + }
  105 +
  106 + if (noResult) {
  107 + this.view.noConponNow.removeClass('hide');
  108 + } else {
  109 + this.view.noConponNow.addClass('hide');
  110 + }
  111 +
  112 + let couponValidHbsHtml = $(couponHbs(result));
  113 +
  114 + couponValidHbsHtml.on('click', '.show-intro-btn', this.showIntro.bind(this));
  115 + if (scroll) {
  116 + this.view.couponList.append(couponValidHbsHtml);
  117 + } else {
  118 + this.view.couponList.html(couponValidHbsHtml);
  119 + }
69 }); 120 });
70 } 121 }
71 122
@@ -73,6 +124,9 @@ class ConponController extends Page { @@ -73,6 +124,9 @@ class ConponController extends Page {
73 * tab 切换 124 * tab 切换
74 */ 125 */
75 tabChange(event) { 126 tabChange(event) {
  127 + this.page = 0;
  128 + this.loadEnd = false;
  129 +
76 let itemClicked = $(event.currentTarget); 130 let itemClicked = $(event.currentTarget);
77 131
78 if (itemClicked.hasClass('no-used')) { 132 if (itemClicked.hasClass('no-used')) {