Dieses Modul umfasst zwei Kernunterstützungen: Laden des Informationsflusses und verzögertes Laden von Bildern, die sowohl für die Server- als auch für die Front-End-Erfahrung eine große Leistungssteigerung darstellen. Die Methoden zur Verwendung dieser beiden Technologien sind unten aufgeführt:
1. Laden des Informationsflusses
Die Kernmethode zum Laden des Informationsflusses ist flow.load(options), unten ist ein Beispiel für die Simulation des Ladens einer Nachrichtenliste
Front-End-HTML und 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>Backend-Servercode
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);
}
}Verzögertes Laden von Bildern
Das verzögerte Laden von Bildern in Laui ist sehr einfach. Ersetzen Sie einfach das src-Attribut des Bildes durch „lay-src“ und rufen Sie dann die Methode „flow.lazyimg()“ auf.
layui.use('flow', function(){
var flow = layui.flow;
//当你执行这样一个方法时，即对页面中的全部带有lay-src的img元素开启了懒加载
flow.lazyimg(); //方式一，全部懒加载
flow.lazyimg({ //方式二，特定容器懒加载
elem:'#box1' //不设置elem，对页面中所有图片进行懒加载
，scrollElem:document
})
});Für mehr Laui Wissen, bitte beachten Sie die Spalte Tutorial zur Layui-Nutzung .
Das obige ist der detaillierte Inhalt vonZusammenfassung der allgemeinen Verwendung von Flow-Komponenten des Laui-Frameworks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
