zoukankan      html  css  js  c++  java
  • ajax实现下拉菜单无刷新加载更多

      1 $(function() {
      2   var page = 1;
      3   var discount = $('#discount');
      4   var innerHeight = window.innerHeight;
      5   var timer2 = null;
      6   $.ajax({
      7     url: '/lightapp/marketing/verify/apply/list?page=1',
      8     type: 'GET',
      9     dataType: 'json',
     10     timeout: '1000',
     11     cache: 'false',
     12     success: function (data) {
     13         if (data.error_code === 0) {
     14           var arrText = [];
     15           for (var i = 0, t; t = data.list[i++];) {
     16             arrText.push('<div class="consume-whole">');
     17             arrText.push('<h3>' + t.title + '</h3>');
     18             if (t.coupon_type == 1 ) {
     19               arrText.push('<p>金额:¥' + t.amount + '</p>');
     20             } else {
     21               arrText.push('<p>优惠:' + t.amount + '</p>');
     22             }
     23             arrText.push('<p><span class="hx-user">用户:s账户飒飒是是是啊啊12' + t.user_name +'</span>' + '<span>核销时间:' + t.use_time + '</span></p>');
     24             arrText.push('</div>');
     25           }
     26           discount.html(arrText.join(''));
     27         };
     28         var ajax_getting = false; 
     29         $(window).scroll(function() {
     30           clearTimeout(timer2);
     31           timer2 = setTimeout(function() {
     32             var scrollTop = $(document.body).scrollTop();  
     33             var scrollHeight = $('body').height();  
     34             var windowHeight = innerHeight;
     35             var scrollWhole = Math.max(scrollHeight - scrollTop - windowHeight);
     36             if (scrollWhole < 100) {
     37               if (ajax_getting) {
     38                 return false;
     39               } else {
     40                 ajax_getting = true;
     41               }
     42               discount.append('<div class="load"><img src="/lightapp/static/zhida-yunying/img/load.gif" width="6%" /></div>');
     43               $('html,body').scrollTop($(window).height() + $(document).height());
     44               page++;
     45               $.ajax({
     46                 url: '/lightapp/marketing/verify/apply/list?page=' + page,
     47                 type: 'GET',
     48                 dataType: 'json',
     49                 success: function (data) {
     50                   if (data.error_code === 0) {
     51                     var arrText = [];
     52                     for (var i = 0, t; t = data.list[i++];) {
     53                       arrText.push('<div class="consume-whole"><a href="/lightapp/marketing/verify/page/info?rule_id=' + t.rule_id + '&coupon_id='+ t.coupon_id +'">');
     54                       arrText.push('<h3>' + t.title + '</h3>');
     55                       if (t.coupon_type == 1 ) {
     56                          arrText.push('<p>金额:¥' + t.amount + '</p>');
     57                       } else {
     58                         arrText.push('<p>优惠:' + t.amount + '</p>');
     59                       };
     60                       arrText.push('<p><span class="hx-user">用户:账户飒111111111' + t.user_name +'</span>' + '<span>核销时间:' + t.use_time + '</span></p>');
     61                       arrText.push('</a></div>');
     62                     }
     63                     discount.append(arrText.join(''));
     64                     $(".load").remove();
     65                   } else {
     66                     $(".load").remove();
     67                     discount.append('<div class="no-data">没有更多数据。</div>');
     68                     $(window).unbind('scroll');
     69                   };
     70                   ajax_getting = false;
     71                 }
     72               });  
     73             };
     74             $(".load").remove();
     75           }, 200);
     76         });
     77         if (data.error_code == 156006) {
     78           $('.coupon').html('<div class="error"><h2>出错啦!</h2><p>原因:未登录</p></div>')
     79         };
     80         if (data.error_code == 156003) {
     81           $('.coupon').html('<div class="error"><h2>出错啦!</h2><p>原因:权限不足~请补充</p></div>')
     82         };
     83         if (data.error_code == 156007) {
     84           $('.coupon').html('<div class="error"><h2>出错啦!</h2><p>原因:服务异常</p></div>')
     85         };
     86         if (data.error_code == 511) {
     87           $('.coupon').html('<div class="error"><h2>出错啦!</h2><p>原因:账号未开通直达号</p></div>')
     88         };
     89         if (data.error_code == 520) {
     90           $('.coupon').html('<div class="stays"><span></span><p>暂无核销记录</p></div>')
     91         }
     92  
     93       },
     94       error: function (data) {
     95  
     96       }
     97   })
     98   $(window).bind("orientationchange", function() {
     99     $('.sliders').css('left',$(window).width() / 2 +'px');
    100   })
    101 })
  • 相关阅读:
    2020,最新Model的设计-APP重构之路
    2020,最新APP重构:网络请求框架
    APP重构之路:引入单元测试
    接口测试中postman环境和用例集
    测试行业是该选择手动测试还是自动化测试?
    2020,必备自动生成测试脚本方案
    2020,必备自动化测试 之 “好用例、坏用例”
    2020,你需掌握go 单元测试进阶篇
    前端测试框架Jest——语法篇
    2020,测试生涯该如何转型升级?
  • 原文地址:https://www.cnblogs.com/greatluoluo/p/5980479.html
Copyright © 2011-2022 走看看