当前位置:Gxlcms > JavaScript > iscroll.js滚动加载实例详解

iscroll.js滚动加载实例详解

时间:2021-07-01 10:21:17 帮助过:2人阅读

滚动加载是个好东西,可以解决一次加载过多的尴尬,其实就是变相的分页,总结下这个轮子的用法,挺简单的。

首先是html结构:

  1. <div class=" saleRecord panelList clear" style="position:relative;height:400px;">
  2. <div id="wrapper">
  3. <div id="scroller">
  4. <ul id="thelist">
  5. @foreach (var item in ViewBag.***)
  6. {
  7. if (item.IsPay == true)
  8. {
  9. <li>
  10. <div class="panelListItemForALL">
  11. <table class="allRecordTable">
  12. <tbody>
  13. <tr>
  14. <td>***</td>
  15. <td>@item.***</td>
  16. </tr>
  17. <tr>
  18. <td>***</td>
  19. <td>@item.***</td>
  20. </tr>
  21. <tr>
  22. <td>***</td>
  23. <td>@item.***</td>
  24. </tr>
  25. </tbody>
  26. </table>
  27. </div>
  28. </li>
  29. }
  30. }
  31. </ul>
  32. <div id="more">加载更多</div>
  33. </div>
  34. </div>

然后是css样式:

  1. #wrapper {
  2. position: absolute;
  3. z-index: 1;
  4. top: 0;
  5. bottom: 0;
  6. left: 0;
  7. width: 100%;
  8. overflow: hidden;
  9. }
  10. #scroller {
  11. position: absolute;
  12. z-index: 1;
  13. -webkit-tap-highlight-color: rgba(0,0,0,0);
  14. width: 100%;
  15. -webkit-transform: translateZ(0);
  16. -moz-transform: translateZ(0);
  17. -ms-transform: translateZ(0);
  18. -o-transform: translateZ(0);
  19. transform: translateZ(0);
  20. -webkit-touch-callout: none;
  21. -webkit-user-select: none;
  22. -moz-user-select: none;
  23. -ms-user-select: none;
  24. user-select: none;
  25. -webkit-text-size-adjust: none;
  26. -moz-text-size-adjust: none;
  27. -ms-text-size-adjust: none;
  28. -o-text-size-adjust: none;
  29. text-size-adjust: none;
  30. }
  31. #more
  32. {
  33. text-align:center;
  34. }


需要的话,给父元素套上position:relative属性
最后是脚本中的初始化和获取数据:

  1. var pagenum = 1, update = true, id=ID;
  2. var myScroll;
  3. setTimeout(function(){
  4. myScroll = new IScroll('#wrapper', { mouseWheel: true, click: true });
  5. myScroll.on('scrollEnd', function () {
  6. //console.log(this.y +"|||"+this.maxScrollY);
  7. //如果滑动到底部,则加载更多数据(距离最底部10px高度)
  8. if ((this.y - this.maxScrollY) == 0) {
  9. getMore();
  10. }
  11. });
  12. },100 );
  13. function getMore() {
  14. var that = document.getElementById("more");
  15. pagenum++;
  16. $.ajax({
  17. url: '/***/getPage',
  18. data: {'currentPage':pagenum,'id':id},
  19. type: 'POST',
  20. datatype: "json",
  21. success: function (data) {
  22. //alert(data);
  23. var list = data.List;
  24. if (list.length < 1) {
  25. pagenum--; that.innerHTML = "已经没有更多了..."; return;
  26. }
  27. var ul = document.getElementById("thelist");
  28. for (var i = 0; i < list.length; i++) {
  29. var str = "<li>";
  30. str += "<div class=\"panelListItemForALL\"><table class=\"allRecordTable\"><tbody><tr><td>***</td><td>"+list[i].OrderCode+"</td>";
  31. str += "</tr><tr><td>***</td><td>"+list[i].GoodsName+"</td></tr>";
  32. str += "<tr><td>***</td><td>"+ data.DatatimeArray[i] +"</td>";
  33. str += "</tr></tbody></table></div>";
  34. str += "</li>";
  35. ul.innerHTML += str;
  36. myScroll.refresh();
  37. }
  38. }
  39. });
  40. }

把相应的数据填充进去就好,当然控制器里要写一个分页获取数据的方法,通过这里的ajax获取。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

人气教程排行