layui框架的flow组件常见用法总结
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了layui框架的flow组件常见用法总结,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2288字,纯文字阅读大概需要4分钟。
内容图文
该模块包含 信息流加载 和 图片懒加载 两大核心支持,无论是对服务端、还是前端体验,都有非常大的性能帮助。下边分别给出了这两种技术的使用方法:
一、信息流加载
信息流加载的核心方法时 flow.load(options) ,下边给了一个模拟加载新闻列表的栗子
前端html和js
<style> ul li { height: 200px; border: 5px solid green; font-size: 50px; line-height: 200px; text-align: center; } </style> <ul id="newsList"></ul> <!-- 条目中可以是任意内容,如:<img src=""> --> <script src="~/Content/layui/layui.js"></script> <script> layui.use('flow', function () { var $ = layui.jquery; //不用额外加载jQuery,flow模块本身是有依赖jQuery的,直接用即可。 var flow = layui.flow; flow.load({ elem: '#newsList' //指定列表容器 , isAuto: false //到底页面底端自动加载下一页,设为false则点击'加载更多'才会加载 //, mb: 100 //距离底端多少像素触发auto加载 , isLazying: true //当单个li很长时,内部有很多图片,对图片进行懒加载,默认false。 , end: '<p style="color:red">木有了</p>' //加载所有后显示文本,默认'没有更多了' , done: function (page, next) { //到达临界,触发下一页 var lis = []; $.get('/Home/GetList?page=' + page, function (res) { //假设你的列表返回在data集合中 layui.each(res.data, function (index, item) { lis.push('<li>' + item + '</li>'); }); next(lis.join(''), page < res.pages);//pages是后台返回的总页数 }); } }); }); </script>
后台服务器代码
public class HomeController : Controller { // GET: Home public ActionResult Index() { return View(); } public ActionResult GetList(int page) { //简单数据库中新闻 List<string> newsList = new List<string>(); for (int i = 0; i < 55; i++) { newsList.Add("新闻" + i); } //总页数 int pages =(int) Math.Ceiling((double)55 / 10); //模拟分页 var data= newsList.Skip<string>((page - 1) * 10).Take(10); return Json(new { data,pages},JsonRequestBehavior.AllowGet); } }
二、图片懒加载
layui中的图片懒加载十分简单,将图片的src属性替换为lay-src,然后调用 flow.lazyimg() 方法即可
layui.use('flow', function(){ var flow = layui.flow; //当你执行这样一个方法时,即对页面中的全部带有lay-src的img元素开启了懒加载 flow.lazyimg(); //方式一,全部懒加载 flow.lazyimg({ //方式二,特定容器懒加载 elem:'#box1' //不设置elem,对页面中所有图片进行懒加载 ,scrollElem:document }) });
更多layui知识请关注layui使用教程栏目。
以上就是layui框架的flow组件常见用法总结的详细内容。
内容总结
以上是互联网集市为您收集整理的layui框架的flow组件常见用法总结全部内容,希望文章能够帮你解决layui框架的flow组件常见用法总结所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。