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

  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.mzph.cn/news/13485.shtml

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

相关文章

RocketMQ 行业分享

5.0的架构发生了重大调整&#xff0c;添加了一层rocketmq-proxy,可以通过grpc的方式接入。 参考 https://juejin.cn/post/7199413150973984827

UE5 关于MRQ渲染器参数

最佳参数&#xff1a; Spatial Sample Count&#xff1a;使用奇数样本时临时抗锯齿会收敛 Temporal Sample Count&#xff1a;超过2之后&#xff0c;采样过大会造成TAA效果不佳 TSR&#xff1a;UE5最好的抗锯齿方案

AI聊天GPT三步上篮!

1、是什么&#xff1f; CHATGPT是OpenAI开发的基于GPT&#xff08;Generative Pre-trained Transformer&#xff09;架构的聊天型人工智能模型。也就是你问它答&#xff0c;根据网络抓去训练 2、怎么用&#xff1f; 清晰表达自己诉求&#xff0c;因为它就是一个AI助手&#…

CF1837 A-D

A题 题目链接&#xff1a;https://codeforces.com/problemset/problem/1837/A 基本思路&#xff1a; 要求计算蚂蚱到达位置 x最少需要多少次跳跃&#xff0c;并输出蚂蚱的跳跃方案。因为每次可以向左或向右跳跃一定距离&#xff08;距离必须为整数&#xff09;&#xff0c;但是…

Web自动化测试高级定位xpath

高级定位-xpath 目录 xpath 基本概念xpath 使用场景xpath 语法与实战 xpath基本概念 XPath 是一门在 XML 文档中查找信息的语言XPath 使用路径表达式在 XML 文档中进行导航XPath 的应用非常广泛XPath 可以应用在UI自动化测试 xpath 定位场景 web自动化测试app自动化测试 …

联想拯救者笔记本切换独显直连游戏体验翻倍、火力全开“嗨”起来

最早的游戏本是由独显负责图形运算&#xff0c;然后直接向屏幕输出所有画面的。但独显负责所有工作&#xff0c;无时无刻都在耗电&#xff1b;撇开游戏模式下高负载的功耗不谈&#xff0c;即便在省电模式下功耗也比核显高得多。 英伟达发布的Optimus混合输出技术&#xff0c;在…

C++继承

&#x1f4df;作者主页&#xff1a;慢热的陕西人 &#x1f334;专栏链接&#xff1a;C &#x1f4e3;欢迎各位大佬&#x1f44d;点赞&#x1f525;关注&#x1f693;收藏&#xff0c;&#x1f349;留言 本博客主要内容讲解了C继承部分相关的内容 文章目录 C继承Ⅰ. 继承的概念和…

Rviz2的自定义插件开发基础知识

1. 简介 Rviz中有不同类型的插件&#xff0c;每个插件都必须具有相应的基本类型&#xff0c;才能被RViz识别 plugin typebase typeDisplayrviz_common::DisplayPanelrviz_common::PanelToolrviz_common::ToolFrames transformation libraryrviz_common::transformation::Fram…

深度探索 Elasticsearch 8.X:function_score 参数解读与实战案例分析

在 Elasticsearch 中&#xff0c;function_score 可以让我们在查询的同时对搜索结果进行自定义评分。 function_score 提供了一系列的参数和函数让我们可以根据需求灵活地进行设置。 近期有同学反馈&#xff0c;function_score 的相关参数不好理解&#xff0c;本文将深入探讨 f…

【数据动态填充到element表格;将带有标签的数据展示为文本格式】

一&#xff1a;数据动态填充到element表格&#xff1b; 二&#xff1a;将带有标签的数据展示为文本格式&#xff1b; 1、 <el-row><el-col :span"24"><el-tabs type"border-card"><el-tab-pane label"返回值"><el-…

基于OpenCV solvePnP函数估计头部姿势

人脸识别 文章目录 人脸识别一、姿势估计概述1、概述2、姿态估计3、在数学上表示相机运动4、姿势估计需要什么5、姿势估计算法6、Levenberg-Marquardt 优化 二、solvePnP函数1、函数原型2、参数详解 三、OpenCV源码1、源码路径 四、效果图像示例参考链接 一、姿势估计概述 1、…

Go语言学习笔记(狂神说)

Go语言学习笔记&#xff08;狂神说&#xff09; 视频地址&#xff1a;https://www.bilibili.com/video/BV1ae41157o9 1、聊聊Go语言的历史 聊聊Go语言的历史-KuangStudy-文章 2、Go语言能做什么 下面列举的是原生使用Go语言进行开发的部分项目。 Docker Docker 是一种操作…

【机器学习】西瓜书学习心得及课后习题参考答案—第4章决策树

这一章学起来较为简单&#xff0c;也比较好理解。 4.1基本流程——介绍了决策树的一个基本的流程。叶结点对应于决策结果&#xff0c;其他每个结点则对应于一个属性测试&#xff1b;每个结点包含的样本集合根据属性测试的结果被划分到子结点中&#xff1b;根结点包含样本全集&a…

Flutter 调试工具篇 | 壹 - 使用 Flutter Inspector 分析界面

theme: cyanosis 1. 前言 很多朋友可能在布局过程中、或者组件使用过程中&#xff0c;会遇到诸如颜色、尺寸、约束、定位等问题&#xff0c;可能会让你抓耳挠腮。俗话说&#xff0c;磨刀不误砍柴工&#xff0c;会使用工具是非常重要的&#xff0c;其实 Flutter 提供了强大的调试…

10分钟实现任务调度平台搭建

日常项目中&#xff0c;会有很多需要定时执行的任务&#xff0c;而这些任务的变化比较多&#xff0c;可能随时都要调整&#xff0c;那么对调度的灵活性要求比较高。我们传统的Spring Task或者Quartz&#xff0c;可以实现定时任务调度&#xff0c;但是内置在代码里&#xff0c;修…

JA64 1+2+3+...n

一、题目 求123...n_牛客题霸_牛客网 二、代码 1.使用静态成员变量构造函数 class SUM {private:static int _i;static int _ret;public:SUM(){_ret _ret _i;_i;}static int GetRet(){return _ret;} }; int SUM::_i1; int SUM::_ret0;class Solution { public:int Sum_So…

【java的类型数据】——八大类型数据

文章目录 前言字面常量字面常量的分类: 数据类型和变量变量的包装类和范围范围整型变量byteintshortlong 浮点型变量双精度浮点型double单精度浮点型float 字符型变量char布尔型变量 boolean 类型转换自动类型转换&#xff08;隐式&#xff09;强制类型转换&#xff08;显式&am…

一个字符驱动示例 -- 微秒级别周期 反转GPIO

仅作为自我记录的一个demo 本次GPIO以微妙级别频率的反转实验有以下几个启示&#xff1a; 一开始在应用层做延时&#xff0c;来实现2微妙周期&#xff0c;占空比50%的GPIO反转&#xff0c;发现波形的频率一直上不去&#xff0c;只能在25hz徘徊&#xff0c;后来索性去掉延时&am…

flink写入到kafka 大坑解析。

1.kafka能不能发送null消息&#xff1f; 能&#xff01; 2 flink能不能发送null消息到kafka&#xff1f; 不能&#xff01; public static void main(String[] args) throws Exception {StreamExecutionEnvironment env StreamExecutionEnvironment.getExecutionEnvironment(…

JavaWeb+jsp+Tomcat的叮当书城项目

点击以下链接获取源码&#xff1a; https://download.csdn.net/download/qq_64505944/88123111?spm1001.2014.3001.5503 技术&#xff1a;ssm jsp JDK1.8 MySQL5.7 Tomcat8.3 源码数据库课程设计 功能&#xff1a;管理员与普通用户和超级管理员三个角色&#xff0c;管理员可…