layui框架学习(33:流加载模块)

news2025/1/20 13:17:17

  Layui中的流加载模块flow主要支持信息流加载和图片懒加载两部分内容,前者是指动态加载后续内容,示例的话可以参考csdn个人博客主页,鼠标移动到页面底部时自动加载更多内容,而后者是指页面显示图片时才会延迟加载图片信息。
  flow模块支持图片懒加载,也即延迟加载,应用比较简单,即之前img标签中将之前采用src属性设置图片地址的方式修改为lay-src属性设置图片地址,同时采用JavaScript调用flow模块中的flow.lazyimg()函数即可对页面中的全部带有 lay-src 的 img 元素启用延迟加载功能。
  flow流加载模块中信息流加载功能的基本用法及显示效果如下所示(测试该模块需要后台服务支持提供分页数据,本文测试时采用SqlSugar分页获取环境监测数据并以webapi形式供前段调用):

	<ul class="flow-default" id="demo"></ul>
	<script>		
		layui.use('flow', function(){
		  var flow = layui.flow;
		  var $ = layui.jquery; 
		 
		  flow.load({
		    elem: '#demo' ,//流加载容器
			isAuto:false
		    ,done: function(page, next){ //执行下一页的回调
			      var lis = [];
				  $.get('http://localhost:5098/ECData/List?page='+page, function(res){
					  layui.each(res.data, function(index, item){
						lis.push('<li>'+ item.id +':温度-'+item.temperature+',湿度-'+item.humidity+'</li>');
					  }); 
					  
				  next(lis.join(''), page < res.pages);    
			});	
		   }
		  })
		});
	</script>

在这里插入图片描述
在这里插入图片描述
  不同于其它模块调用的是render函数,flow流加载模块中信息流加载功能调用的是flow.load,其输入参数类似于render函数,也是组织基础参数的集合。
  基础参数isAuto设置滚动到页面底部时是否自动加载后续内容,默认为true,为false时会在页面底部显示“加载更多”按钮,需要点击该按钮才会加载后续内容(示例见上面截图)。
  基础参数mb设置滚动条与底部的临界距离,默认50,当isAuto为true且滚动条与底部小于等于该距离时,触发后续内容自动加载。
  基础参数end设置内容全部加载后的提示信息,默认显示内容为“没有更多了”,其效果如下所示:

在这里插入图片描述

  基础参数done设置触发内容自动加载时的事件处理函数,函数包括两个参数page和next,page为后续要加载内容的页码,而next为满足“加载更多”的条件,关于done的使用示例可查看参考文献3和参考文献4中的flow模块源码。
  由于是前端调用本地webapi,调用过程中出现了跨域调用的错误,之前也遇到过,通过对照参考文献5解决的问题。

参考文献:
[1]B站:layui框架精讲全套视频教程
[2]https://layui.gitee.io/v2/docs/
[3]https://layui.gitee.io/v2/demo/
[4]https://github.com/layui/layui/
[5]https://blog.csdn.net/gc_2299/article/details/125646074

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/808757.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

苍穹外卖-day08

苍穹外卖-day08 本项目学自黑马程序员的《苍穹外卖》项目&#xff0c;是瑞吉外卖的Plus版本 功能更多&#xff0c;更加丰富。 结合资料&#xff0c;和自己对学习过程中的一些看法和问题解决情况上传课件笔记 视频&#xff1a;https://www.bilibili.com/video/BV1TP411v7v6/?sp…

第17节 R语言分析:生物统计数据集 R 编码分析和绘图

生物统计数据集 R 编码分析和绘图 生物统计学,用于对给定文件 data.csv 中的医疗数据应用 R 编码,该文件是患者人口统计数据集,包含有关来自各种祖先谱系的个体的标准信息。 数据集特征解释 脚本 output= file("Output.txt") # File name of output log sink(o…

[数据集][目标检测]城市道路井盖破损丢失目标检测1377张

数据集制作单位&#xff1a;未来自主研究中心(FIRC) 数据集格式&#xff1a;Pascal VOC格式(不包含分割路径的txt文件和yolo格式的txt文件&#xff0c;仅仅包含jpg图片和对应的xml) 图片数量(jpg文件个数)&#xff1a;1377 标注数量(xml文件个数)&#xff1a;1377 标注类别数&a…

Spring源码(五)— 解析XML配置文件(二) 定制化标签解析流程

上一篇以bean标签为例&#xff0c;介绍了属于defaultNamesapce标签的解析流程&#xff0c;但是defaultNamespace中默认的标签只有bean、beans、alias、import这四个&#xff0c;而我们平时在xml中配置的标签有很多。那其余的标签是如何解析&#xff1f; 在这篇文章会详细介绍定…

一个监控系统的典型架构

监控系统的典型架构图&#xff0c;从左往右看&#xff0c;采集器是负责采集监控数据的&#xff0c;采集到数据之后传输给服务端&#xff0c;通常是直接写入时序库。然后就是对时序库的数据进行分析和可视化&#xff0c;分析部分最典型的就是告警规则判断&#xff0c;即图上的告…

【李宏毅机器学习·学习笔记】Deep Learning General Guidance

本节课可视为机器学习系列课程的一个前期攻略&#xff0c;这节课主要对Machine Learning 的框架进行了简单的介绍&#xff1b;并以training data上的loss大小为切入点&#xff0c;介绍了几种常见的在模型训练的过程中容易出现的情况。 课程视频&#xff1a; Youtube&#xff1…

【Spring框架】SpringBoot配置文件

目录 配置文件作用application.properties中午乱码问题&#xff1a;配置文件里面的配置类型分类SpringBoot热部署properties基本语法properties配置文件的优缺点&#xff1a;yml配置文件说明yml基本语法配置对象properties VS yml 配置文件作用 整个项⽬中所有重要的数据都是在…

【MyBatis 学习二】增删改查 参数占位符 #{} 和 ${}的使用

目录 一、增删改查 &#x1f337;1、用户类 &#x1f337;2、UserMapper &#x1f337;3、UserMapper.xml &#x1f337;4、测试类Test &#x1f337;5、UserService类 &#x1f337;6、UserController类 &#x1f337;7、注意点总结 二、#{} 和${} 的使用区别 &…

一个 SpringBoot 项目能处理多少请求

首先&#xff0c;这个问题有坑&#xff0c;因为 spring boot 不处理请求&#xff0c;只是把现有的开源组件打包后进行了版本适配、预定义了一些开源组件的配置通过代码的方式进行自动装配进行简化开发。这是 spring boot 的价值。 如果我是面试官&#xff0c;我不会问这种问题。…

BLE基础理论/Android BLE开发示例

参考&#xff1a;https://blog.csdn.net/qq_36075612/article/details/127739150?spm1001.2014.3001.5502 参考&#xff1a; https://blog.csdn.net/qq_36075612/article/details/122772966?spm1001.2014.3001.5502 目录 蓝牙的分类传统蓝牙低功耗蓝牙 蓝牙专业词汇&#xff…

深度剖析C++ 异常机制

传统排错 我们早在 C 程序里面传统的错误处理手段有&#xff1a; 终止程序&#xff0c;如 assert&#xff1b;缺陷是用户难以接受&#xff0c;说白了就是一种及其粗暴的手法&#xff0c;比如发生内存错误&#xff0c;除0错误时就会终止程序。 返回错误码。缺陷是需要我们自己…

docker启动容器报错

报错信息 [rootDream soft]# docker run -it -d -p 8080:8080 tomcat eec9fab6b9ca06d2bbf1467aef05d8020ee60448978e10ac20c38888934f0a0b docker: Error response from daemon: driver failed programming external connectivity on endpoint hungry_euclid (163242f0079e72…

C语言之pthread_cond_t信号变化探究总结(八十)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…

MySQL | 常用命令示例

MySQL | 常用命令示例 一、启停MySQL数据库服务二、连接MySQL数据库三、创建和管理数据库四、创建和管理数据表五、数据备份和恢复六、查询与优化 MySQL是一款常用的关系型数据库管理系统&#xff0c;广泛应用于各个领域。在使用MySQL时&#xff0c;我们经常需要编写一些常用脚…

M 芯片的 macos 系统安装虚拟机 centos7 网络配置

centos 安装之前把网络配置配好或者是把网线插好 第一步找到这个 第二步打开网络适配器 选择图中所指位置 设置好之后 开机启动 centos 第三步 开机以后 编写网卡文件保存 重启网卡就可以了&#xff0c;如果重启网卡不管用&#xff0c;则重启虚拟机即可 “ ifcfg-ens160 ” 这…

盖子的c++小课堂——第二十一讲:map

前言 时隔一周&#xff0c;我又来更新了^_^&#xff0c;今天都第二十一讲了&#xff0c;前三个板块马上就结束了&#xff0c;也就是小课堂&#xff08;1&#xff09;马上结束了&#xff0c;敬请期待“盖子的c小课堂&#xff08;2&#xff09;”&#xff0c;嘿嘿~~ map 数据容…

QT--day5(网络聊天室、学生信息管理系统)

服务器&#xff1a; #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);//给服务器指针实例化空间servernew QTcpServer(this); }Widget::~Widget() {delete ui; …

【C#】.Net Framework框架下的Authorize权限类

2023年&#xff0c;第31周&#xff0c;第3篇文章。给自己一个目标&#xff0c;然后坚持总会有收货&#xff0c;不信你试试&#xff01; 在C#的.NET Framework中&#xff0c;你可以使用Authorize类来处理权限认证。Authorize类位于System.Web.Mvc命名空间中&#xff0c;它提供了…

VS创建wsdl服务提供给java调用

文章目录 前言1.c#创建asp.net web服务1.1 创建ASP.NET Web应用程序1.2 添加服务类1.3 定义服务方法1.3 浏览服务1.4 发布服务1.5 IIS部署服务 2.Java中调用服务2.1 用动态客户端工厂类调用2.1.1 引入依赖2.1.2 调用测试代码2.1.3 测试结果 2.2 创建代理类进行调用2.2.1 使用ws…

微软:向量搜索和向量数据库

向量是未来的数据表示 向量搜索 方法 减少距离计算次数 哈希法空间划分树近邻图 SPTAG 混合了kd树和近邻图 Change 大规律向量搜索 内存可扩展 倒排索引 全局量化进行压缩 top1的召回率比较低 基于图的近邻图 SPANN 倒排索引中的问题&#xff1a; 不平衡的聚类方法低…