這裡講解一下滾動分頁的常用的兩種方法：

方法一：

<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>

方法二：

@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>
    }

方法三： （Vue的分頁）

<template>
    <div class="group-container" v-infinite-scroll="getActiveByAxios" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
    </div>
    <load-more tip="正在載入" v-if="showLoading"></load-more>
</template>

  <script>
  import Vue from 'vue'
  import Axios from 'axios'
  import { LoadMore  } from 'vux'
  import infiniteScroll from 'vue-infinite-scroll'

  Vue.use(infiniteScroll);

 export default{
     data(){
         return {
          showLoading:true,
          busy: false,
          pageInfo:{
            count:0,
            pageIndex:1,
            pageSize:5
          },
         }
     },
     methods:{
         getActiveByAxios(){
                         if((that.pageInfo.pageIndex - 1) * that.pageInfo.pageSize >                     that.pageInfo.count){
                that.busy = false;
                that.showLoading = false;
                return;
              }
              Axios.get('url',{
                params:{
                  pageSize:that.pageInfo.pageSize,
                  pageNum:that.pageInfo.pageIndex
                }
              }).then(function (response) {
                if (response.data.success){
                  let list = response.data.data.commentList;
                  that.comments = that.comments.concat(list);
                  that.pageInfo.count = response.data.data.page.count;
                  that.pageInfo.pageIndex += 1;
                  setTimeout(() => {
                    that.busy = false;
                  }, 10);
                }
              }).catch(function (error) {

              })
         }
     }
 }

</script>