Layui的流載入，懶載入
阿新 • • 發佈：2019-02-11
一直想使用流載入，載入資訊，感覺很酷。但是一直又不想去學，學的東西都太雜了，選擇了一下決定使用layui的流載入。
一個最簡單的流載入程式碼如下（你複製過去之後，一定要把layui.css 和 layui.js改成你本地自己的）
注：
1、你會發現下面這個程式碼配置的是自動載入，但是還是出現了手動載入，是因為開始的個數不夠一頁的。當個數達到了一頁，就會是自動載入了。
2、預設的“一葉”對比標準的對你的整個頁面，如果你所做的是一小塊的話，有個引數可以設定的。最後會給出所以引數配置。
3、下面這個程式碼是資訊流，沒有使用圖片懶載入，我個人用不上，有興趣的可以自行去了解。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="css/layui.css" /> <script type="text/javascript" src="js/layui.all.js" charset="utf-8"></script> </head> <body> <ul class="flow-default" id="LAY_demo1"></ul> <script> layui.use('flow', function(){ var flow = layui.flow; flow.load({ elem: '#LAY_demo1' //流載入容器 ,done: function(page, next){ //執行下一頁的回撥 //模擬資料插入 //每次滑動到了底部度會執行這個函式 setTimeout(function(){ var lis = []; for(var i = 0; i < 8; i++){ lis.push('<li>'+ ( (page-1)*8 + i + 1 ) +'</li>') } //執行下一頁渲染，第二引數為：滿足“載入更多”的條件，即後面仍有分頁 //pages為Ajax返回的總頁數，只有當前頁小於總頁數的情況下，才會繼續出現載入更多 next(lis.join(''), page < 10); //假設總頁數為 10 //最後這個數字，是表示每次載入所用的時間。 },1500); } }); }); </script> </body> </html>
基本都是使用的預設配置。
下面給出全部的配置
