本文實例為大家分享了移動端web滾動分頁展示的具體代碼,供大家參考,具體內容如下
方法一:前端代碼:
<script type="text/javascript">    var page = 2; //當前頁的頁碼    var flagNoData = false; //false    var allpage = @Model.PageCount; //總頁碼,會從后臺獲取    function showAjax(currentIndex) {      $.ajax({        url: "@Url.Action("GetEmployeeData", "Home")",        type: "GET",        data: {"pageNum":currentIndex},        success: function (data) {          //要執行的內容          showContent(data);          if (currentIndex >= allpage) { //當前頁碼大于等于總頁碼            flagNoData = true;          };          page += 1;  //頁數加1        }      })    }    function scrollFn() {      //真實內容的高度      var pageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight);      //視窗的高度      var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;      //隱藏的高度      var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;      if (flagNoData) { //數據全部加載完了        return;      } else if (pageHeight - viewportHeight - scrollHeight < 10) {  //如果滿足觸發條件,執行        showAjax(page);      }    }    $(window).bind("scroll", scrollFn);  //綁定滾動事件    function showContent(datacontent)    {      $("#contentDiv").append(datacontent);    }  </script>適合移動端、PC端頁面下拉 滾動分頁
方法二(推薦):
插件 https://github.com/ximan/dropload
下載插件,引用css 和 js:
<link rel="stylesheet" href="~/Content/dropload.css" rel="external nofollow" /><script type="text/javascript" src="~/Scripts/dropload.min.js"></script>
@section scripts{  <script type="text/javascript" src="~/Scripts/dropload.min.js"></script>  <script type="text/javascript">    $(function () {      var page = 1;      var pageSize = 10;      $(".content").dropload({        scrollArea: window,        loadDownFn: function (me) {          page++;          var result = '';          $.ajax({            url: "@Url.Action("GetEmployeeData", "Home")",            type: "GET",            data: { "pageNum": page },            success: function (data) {              var arrlen = data.length;              if (arrlen > 0) {                showContent(data);                me.resetload();              } else {                me.lock();                me.noData();              }            },            error: function (xhr, type) {              alert('Ajax error:' + xhr + type);              me.resetload();            }          })        }      })    });    function showContent(datacontent) {      $("#contentDiv").append(datacontent);    }  </script>  }以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答