SUI 的几个坑
SUI 2017-04-10 10:59:35

 1、关于无限加载：

$.init()  一定要先初始化，其实我加了，它也报错，但是不知道为什么 我全删了，再加上 它又正常了... 好了 就先记录一下

XML/HTML Code复制内容到剪贴板
  1. <script>  
  2.     $.init();  
  3.   
  4.     // 加载flag  
  5.     var loading = true;  
  6.     // 最多可加载的条目  
  7.     var maxItems = 100;  
  8.     // 每次加载添加多少条目  
  9.     var itemsPerLoad = 20;  
  10.     var lastIndex = 0;  
  11.   
  12.     var addItems = function(number,lastIndex) {  
  13.         $.post("/survey/wxcnooc/index", { "number": number ,"lastIndex":lastIndex },  
  14.             function(rep){  
  15.                 if(rep.code == 201){  
  16.                     // 生成新条目的HTML  
  17.                     var html = '';  
  18.                     $.each(rep.data[0], function(i, val) {  
  19.                         html += '<li class="item-content" date-name="'+val.surveyls_title+'" data-sid="'+val.sid+'" data-surveyls-survey-id="'+val.surveyls_survey_id+'"><div class="item-inner"><div class="item-title"><a href="/survey/wxcnooc/detail?sid='+val.sid+'">'+ val.surveyls_title+'</a></div></div></li>';  
  20.                     });  
  21.                     lastIndex += rep.data[0].length;  
  22.                     maxItems = rep.data[1];  
  23.                     // 添加新条目  
  24.                     $('.infinite-scroll-bottom .list-container').append(html);  
  25.                     loading = false;  
  26.   
  27.                     if(lastIndex >= maxItems){  
  28.                         // 加载完毕，则注销无限加载事件，以防不必要的加载  
  29.                         $.detachInfiniteScroll($('.infinite-scroll'));  
  30.                         // 删除加载提示符  
  31.                         $('.infinite-scroll-preloader').remove();  
  32.                         return;  
  33.                     }  
  34.                 }else{  
  35.                     $.alert(rep.status);  
  36.                 }  
  37.             }, "json");  
  38.     }  
  39.   
  40.     //预先加载20条  
  41.     addItems(itemsPerLoad, lastIndex);  
  42.   
  43.     // 注册'infinite'事件处理函数  
  44.     $(document).on('infinite', '.infinite-scroll-bottom',function() {  
  45.         // 如果正在加载，则退出  
  46.         if (loading) return;  
  47.   
  48.         // 设置flag  
  49.         loading = true;  
  50.   
  51.         //加载过程  
  52.         setTimeout(function() {  
  53.             // 重置加载flag  
  54.             loading = false;  
  55.             lastIndexlastIndex = lastIndex?lastIndex:itemsPerLoad;  
  56.             if (lastIndex >= maxItems) {  
  57.                 // 加载完毕，则注销无限加载事件，以防不必要的加载  
  58.                 $.detachInfiniteScroll($('.infinite-scroll'));  
  59.                 // 删除加载提示符  
  60.                 $('.infinite-scroll-preloader').remove();  
  61.                 return;  
  62.             }  
  63.             // 添加新条目  
  64.             addItems(itemsPerLoad, lastIndex);  
  65.             // 更新最后加载的序号  
  66.             lastIndex = $('.list-container li').length;  
  67.             //容器发生改变,如果是js滚动，需要刷新滚动  
  68.             $.refreshScroller();  
  69.         }, 1000);  
  70.     });  
  71. </script>  

 

2、关于页面过长，滚动条不见了：

这个问题困扰了我三天，各种试，最后发现：

如果你的header不用它的那种样式，那么请你把所有的DIV放在

XML/HTML Code复制内容到剪贴板
  1. <div class="page-group">  
  2.     <div class="page page-current detail">  
  3.         <div class="content">  
  4.             <!-- 这里开始你的HTML代码 -->  
  5.         </div>  
  6.     </div>  
  7. </div>  

 

 

本文来自于：http://www.yoyo88.cn/study/sui/97.html

上一篇 返回列表
下一篇 返回列表
相关的文章
Powered by yoyo苏ICP备15045725号