• 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');
    }
    });
    });
  • 相关阅读:
    前端基础进阶变量对象详解
    伪元素::before与::after的用法
    网站性能优化你需知道的东西
    Python爬虫音频数据
    python一步高级编程
    Android APK打包流程
    软件漏洞学习
    pycrypto 安装
    ubuntu16.04中将python3设置为默认
    Android NDK 编译选项设置[zhuan]
  • 原文地址:https://www.cnblogs.com/luqiang213917/p/12587537.html
Copyright © 2020-2023  润新知