VUE PC端分页类与手机端下拉加载

在进行列表编写时，我们经常会遇到数据过多的情况；
这是就需要对数据进行处理，进行分页显示，
通常PC端使用分页页码显示进行分页，手机端采用下拉加载；
今天介绍一下，当前后端分离时，
如何使用 javascript 进行分页和异步请求；
这里用 VUE 做模板引擎，使用 AXIOS 进行请求

本文源码地址：https://github.com/kuif/demo/tree/master/Vue%20%E5%88%86%E9%A1%B5

vue配合axios进行数据请求：

// vue 数据处理
var vm = new Vue({
    el: '.vue_ajax',
    data: {
        article:[]
    },
    // 页面加载的时候会自动执行mounted
    mounted: function () {
        getArticleList(pageData.i); // 获取数据
    }
});
// 获取文章列表
function getArticleList(page) {
    // 获取下一页的数据
    axios.post(pageData.url, Qs.stringify({cat_id:'2', page:page}))
    .then(function (res) {
        console.log(res.data);  // （注意返回数据层级）
        if(res.data.code==1){
            vm.article = vm.article.concat(res.data.data.data); // 手机端数据拼接
            // vm.article = res.data.data.data; // PC端进行数据替换
            removeLoading(); // 移除加载中的样式
        }else{
            pageData.over = true;
            loadingToOver(); // 数据全部加载
        }
    })
}

一、手机端下拉加载（示例）

通常下拉加载是对滚动条进行监听，判断是否到底部，
如果下拉到底部时，对下一页的数据进行请求，
如果有数据，则对数据进行拼接，无则显示已全部加载。
这里我们使用如下代码来进行判断是否下拉到底部：

// 获取滚动条当前的位置
function getScrollTop() {
    var scrollTop=0;
    if(document.documentElement && document.documentElement.scrollTop){
        scrollTop=document.documentElement.scrollTop;
    }else if(document.body) {
        scrollTop=document.body.scrollTop;
    }
    return scrollTop;
}
// 获取当前可视范围的高度
function getClientHeight() {
    var clientHeight=0;
    if(document.body.clientHeight && document.documentElement.clientHeight){
        clientHeight=Math.min(document.body.clientHeight, document.documentElement.clientHeight);
    }else{
        clientHeight=Math.max(document.body.clientHeight, document.documentElement.clientHeight);
    }
    return clientHeight;
}
// 获取文档完整的高度
function getScrollHeight() {
    return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
}

// 监听滚动事件
window.onscroll=function () {
    if (pageData.over) {
        return false;
    }
    // 判断当前是否下拉到底
    if ( getScrollHeight()-(getScrollTop()+getClientHeight())<=10 ) {
        pageData.i++ // 页数+1
        addLoading(); // 下显示加载中
        // 获取下一页的数据
        getArticleList(pageData.i);
    }
}

二、PC端JS分页类（示例）

这里使用了一个原生的分页类进行显示，
大家可以根据自己的需求合并到自己的项目中：
使用方法：

var page = new Page({
    id: 'pagination',
    pageTotal: pageData.last_page, //必填,总页数
    pageAmount: pageData.per_page,  //每页多少条
    dataTotal: pageData.total, //总共多少条数据
    curPage:1, //初始页码,不填默认为1
    pageSize: 5, //分页个数,不填默认为5
    showPageTotalFlag:true, //是否显示数据统计,不填默认不显示
    showSkipInputFlag:true, //是否支持跳转,不填默认不显示
    getPage: function (page) {
        //获取当前页数
       // console.log(page);
       pageData.i = page; // 页数+1
       getArticleList(page); // 获取当前页面数据
    }
})

myPagination 分页类 myPagination.js：、

function Page(_ref) {
    var pageSize = _ref.pageSize,
        pageTotal = _ref.pageTotal,
        curPage = _ref.curPage,
        id = _ref.id,
        getPage = _ref.getPage,
        showPageTotalFlag = _ref.showPageTotalFlag,
        showSkipInputFlag = _ref.showSkipInputFlag,
        pageAmount = _ref.pageAmount,
        dataTotal = _ref.dataTotal;
    if(!pageSize){
        pageSize = 0
    };
    if(!pageSize){
        pageSize = 0
    };
    if(!pageTotal){
        pageTotal = 0
    };
    if(!pageAmount){
        pageAmount = 0
    };
    if(!dataTotal){
        dataTotal = 0
    };
    this.pageSize = pageSize || 5; //分页个数
    this.pageTotal = pageTotal; //总共多少页
    this.pageAmount = pageAmount; //每页多少条
    this.dataTotal = dataTotal; //总共多少数据
    this.curPage = curPage || 1; //初始页码
    this.ul = document.createElement('ul');
    this.id = id;
    this.getPage = getPage;
    this.showPageTotalFlag = showPageTotalFlag || false; //是否显示数据统计
    this.showSkipInputFlag = showSkipInputFlag || false; //是否支持跳转
    if(dataTotal >0 &&pageTotal>0){
        this.init();
    }else{
        console.error("总页数或者总数据参数不对")
    }
};

// 给实例对象添加公共属性和方法
Page.prototype = {
    init: function init() {
        var pagination = document.getElementById(this.id);
        pagination.innerHTML = '';
        this.ul.innerHTML = '';
        pagination.appendChild(this.ul);
        var that = this;
        //首页
        that.firstPage();
        //上一页
        that.lastPage();
        //分页
        that.getPages().forEach(function (item) {
            var li = document.createElement('li');
            if (item == that.curPage) {
                li.className = 'active';
            } else {
                li.onclick = function () {
                    that.curPage = parseInt(this.innerHTML);
                    that.init();
                    that.getPage(that.curPage);
                };
            }
            li.innerHTML = item;
            that.ul.appendChild(li);
        });
        //下一页
        that.nextPage();
        //尾页
        that.finalPage();

        //是否支持跳转
        if (that.showSkipInputFlag) {
            that.showSkipInput();
        }
        //是否显示总页数,每页个数,数据
        if (that.showPageTotalFlag) {
            that.showPageTotal();
        }
    },
    //首页
    firstPage: function firstPage() {
        var that = this;
        var li = document.createElement('li');
        li.innerHTML = '首页';
        this.ul.appendChild(li);
        li.onclick = function () {
            var val = parseInt(1);
            that.curPage = val;
            that.getPage(that.curPage);
            that.init();
        };
    },
    //上一页
    lastPage: function lastPage() {
        var that = this;
        var li = document.createElement('li');
        li.innerHTML = '<';
        if (parseInt(that.curPage) > 1) {
            li.onclick = function () {
                that.curPage = parseInt(that.curPage) - 1;
                that.init();
                that.getPage(that.curPage);
            };
        } else {
            li.className = 'disabled';
        }
        this.ul.appendChild(li);
    },
    //分页
    getPages: function getPages() {
        var pag = [];
        if (this.curPage <= this.pageTotal) {
            if (this.curPage < this.pageSize) {
                //当前页数小于显示条数
                var i = Math.min(this.pageSize, this.pageTotal);
                while (i) {
                    pag.unshift(i--);
                }
            } else {
                //当前页数大于显示条数
                var middle = this.curPage - Math.floor(this.pageSize / 2),
                    //从哪里开始
                    i = this.pageSize;
                if (middle > this.pageTotal - this.pageSize) {
                    middle = this.pageTotal - this.pageSize + 1;
                }
                while (i--) {
                    pag.push(middle++);
                }
            }
        } else {
            console.error('当前页数不能大于总页数');
        }
        if (!this.pageSize) {
            console.error('显示页数不能为空或者0');
        }
        return pag;
    },
    //下一页
    nextPage: function nextPage() {
        var that = this;
        var li = document.createElement('li');
        li.innerHTML = '>';
        if (parseInt(that.curPage) < parseInt(that.pageTotal)) {
            li.onclick = function () {
                that.curPage = parseInt(that.curPage) + 1;
                that.init();
                that.getPage(that.curPage);
            };
        } else {
            li.className = 'disabled';
        }
        this.ul.appendChild(li);
    },
    //尾页
    finalPage: function finalPage() {
        var that = this;
        var li = document.createElement('li');
        li.innerHTML = '尾页';
        this.ul.appendChild(li);
        li.onclick = function () {
            var yyfinalPage = that.pageTotal;
            var val = parseInt(yyfinalPage);
            that.curPage = val;
            that.getPage(that.curPage);
            that.init();
        };
    },
    //是否支持跳转
    showSkipInput: function showSkipInput() {
        var that = this;
        var p = document.createElement('p');
        var b1 = document.createElement('b');
        b1.innerHTML = '跳转到';
        p.appendChild(b1);
        var input = document.createElement('input');
        input.setAttribute("type","number");
        input.onkeydown = function (e) {
            var oEvent = e || event;
            if (oEvent.keyCode == '13') {
                var val = parseInt(oEvent.target.value);
                if (typeof val === 'number' && val <= that.pageTotal && val>0) {
                    that.curPage = val;
                    that.getPage(that.curPage);
                }else{
                    alert("请输入正确的页数 !")
                }
                that.init();
            }
        };
        p.appendChild(input);
        var b2 = document.createElement('b');
        b2.innerHTML = '页';
        p.appendChild(b2);
        // this.ul += p;
        this.ul.appendChild(p);
    },
    //是否显示总页数,每页个数,数据
    showPageTotal: function showPageTotal() {
        var that = this;
        var p = document.createElement('p');
        // p.className = 'pageRemark';
        p.innerHTML = '共<b>'+ that.pageTotal +'</b>页<b> '+ that.dataTotal +'</b>条数据'
        this.ul.appendChild(p);
    }
};