zoukankan      html  css  js  c++  java
  • layui 滚动加载

    直接上核心代码,其实官网介绍的很详细:

    var pageSize = 5;//每次请求新闻的条数
    flow.load({
        elem: '#newsList' //指定列表容器
        ,scrollElem: '#newsList'//滚动条所在元素
        ,done: function(page, next){ //到达临界点(默认滚动触发),触发下一页的回调
            $.ajax({
                type: "POST",
                dataType: "json",
                data: {'pageIndex': page,'pageSize':pageSize},//请求的页码和每页显示条数
                async: true,
                url: '/news/list.do',
                success: function (result) {
                    var lis = [];
                    if (result.req && result.rows.length > 0) {//数据插入
                        //result.rows为Ajax返回的新闻数据
                        layui.each(result.rows, function(index, item){
                            var newsHtml = '<span news-id="'+item.id+'">'+ item.title +'</span>';
                            lis.push(newsHtml);
                        });
    
                        //执行下一页渲染,第二参数为:满足“加载更多”的条件,即后面仍有分页
                        //result.total为Ajax返回的总页数,只有当前页小于总页数的情况下,才会继续出现加载更多
                        next(lis.join(''), page < Math.ceil(result.total/pageSize));
                    }
    
                }
            });
        }
    });
  • 相关阅读:
    面向对象(2)
    毕业季面试题(7)
    面向对象(class0420)
    ASP.NET入门(class0612)
    数据结构与算法(二叉树)
    算法总结(2)数据结构
    毕业季面试题(6)
    常规页生命周期(class0620)
    (三) 语句
    (二) 运算符
  • 原文地址:https://www.cnblogs.com/zhinian-/p/11864225.html
Copyright © 2011-2022 走看看