js实现分页

关注

原创最新推荐文章于 2026-02-18 16:20:02 发布 438 阅读 AI 写同款· GEO 优化 ›

小说阅读器中分页的实现[js] 文章目录1. 写在前面2. 一开始的思路3. 文本分割4. CSS columns 属性 1. 写在前面最近在尝试做一个小说阅读器的Web App，对于阅读器来说最重要的肯定就是读书的界面了。在这个页面中，需要将大段的文字进行分页并让文字正好填满屏幕。一开始我把问题想得较为简单，但在实现过程中遇到了一些困难。 2. 一开始的思路接口返回的数据即为小说某一章的全部文本。在我一开始的想法中，可以在收到返回数据后，将文本全部放入一个容器中，通过容器的高度除以屏幕可视区域的高度计算出需要拆分的页数。接着渲染相阅读详情

实现根据页数获得数据：

/**
 * Created by Administrator on 15-7-8.
 */
function Pagination(list) {
    var data = [],
        len = list.length ? list.length: 0,
        allData = list,
        totalPage = Math.ceil(len / 9); //总页数
        var currentPage = 1; //当前页
        this.nextPage = function(){
            currentPage++;
            currentPage = currentPage > totalPage ? totalPage : currentPage;
            return getData(currentPage);
        }
    this.prePage = function(){
        currentPage--; currentPage = currentPage <= 0 ? 1 : currentPage;
        return getData(currentPage);
    }
    this.fristPage = function(){
        return getData(1);
    }
    this.getPage = function(index){
        return getData(index);
    }
    function getData(page){
        if(page>totalPage || page <= 0){
            return;
        }
        var begin = (page-1)*9,
            end = begin + 9;
        end = end < len ? end : len;
        var array = [];
        for(var i = begin; i < end; i++){
            array.push(allData[i]);
        }
        return array;
    }
}//实例化var data = new Pagination(list);