zoukankan      html  css  js  c++  java
  • layui中流加载layui.flow

    1.引入layui.css和layui.js

    2. html中定义容器

    <div id="demo"></div>

    js部分:

    layui.use('flow', function(){
    var $ = layui.jquery; //不用额外加载jQuery,flow模块本身是有依赖jQuery的,直接用即可。
    var flow = layui.flow;
    flow.load({
    elem: '#demo' //指定列表容器
    ,done: function(page, next){ //到达临界点(默认滚动触发),触发下一页
    var list = [];
    //以jQuery的Ajax请求为例,请求下一页数据(注意:page是从2开始返回)
    $.post( '接口地址',{page:page,limit:10}, function(res){
    //假设你的列表返回在data集合中
    layui.each(res.data.list, function(index, item){
    list.push("<div class='van-col' style='padding-left: 2.5px; padding-right: 2.5px;'>" +
    "<img src=""+item.pic+"">" +
    "</div>");
    });
    //执行下一页渲染,第二参数为:满足“加载更多”的条件,即后面仍有分页
    //totalPage为Ajax返回的总页数,只有当前页小于总页数的情况下,才会继续出现加载更多
    next(list.join(''), page < res.data.totalPage);
    },'json');
    }
    });
    });
  • 相关阅读:
    sort函数的运用
    数据库设计三大范式
    LeetCode 64. 求1+2+…+n
    LeetCode 876. 链表的中间结点
    单链表的创建和基本操作 C语言
    LeetCode 365. 水壶问题
    LeetCode 1160. 拼写单词
    LeetCode 409. 最长回文串
    LeetCode 836. 矩形重叠
    LeetCode 7. 整数反转
  • 原文地址:https://www.cnblogs.com/luqiang213917/p/12587537.html
Copyright © 2011-2022 走看看