layui框架的flow組件的核心用法有哪些？-創(chuàng)新互聯(lián)

該模塊包含 信息流加載 和  圖片懶加載  兩大核心支持，無論是對(duì)服務(wù)端、還是前端體驗(yàn)，都有非常大的性能幫助。下邊分別給出了這兩種技術(shù)的使用方法：

創(chuàng)新互聯(lián)成立于2013年，我們提供高端重慶網(wǎng)站建設(shè)公司、成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、網(wǎng)站定制、全網(wǎng)整合營(yíng)銷推廣、成都小程序開發(fā)、微信公眾號(hào)開發(fā)、seo優(yōu)化服務(wù)，提供專業(yè)營(yíng)銷思路、內(nèi)容策劃、視覺設(shè)計(jì)、程序開發(fā)來完成項(xiàng)目落地，為玻璃隔斷企業(yè)提供源源不斷的流量和訂單咨詢。

一、信息流加載

信息流加載的核心方法時(shí)  flow.load(options) ，下邊給了一個(gè)模擬加載新聞列表的栗子

前端html和js

后臺(tái)服務(wù)器代碼

public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult GetList(int page)
        {
           //簡(jiǎn)單數(shù)據(jù)庫中新聞
            List newsList = new List();
            for (int i = 0; i < 55; i++)
            {
                newsList.Add("新聞" + i);
            }
           //總頁數(shù)
            int pages =(int) Math.Ceiling((double)55 / 10);
　　　　　　　//模擬分頁
            var data= newsList.Skip((page - 1) * 10).Take(10);
            return Json(new { data,pages},JsonRequestBehavior.AllowGet);
        }
    }

二、圖片懶加載

layui中的圖片懶加載十分簡(jiǎn)單，將圖片的src屬性替換為lay-src，然后調(diào)用  flow.lazyimg() 方法即可

layui.use('flow', function(){
  var flow = layui.flow;
  //當(dāng)你執(zhí)行這樣一個(gè)方法時(shí)，即對(duì)頁面中的全部帶有l(wèi)ay-src的img元素開啟了懶加載
    flow.lazyimg();    //方式一，全部懶加載
    flow.lazyimg({     //方式二，特定容器懶加載
    elem:'#box1'      //不設(shè)置elem，對(duì)頁面中所有圖片進(jìn)行懶加載
    ，scrollElem:document
    }) 
});

以上就是layui框架的flow組件常見用法總結(jié)的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司其它相關(guān)文章！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

分享標(biāo)題：layui框架的flow組件的核心用法有哪些？-創(chuàng)新互聯(lián)
URL鏈接：http://m.jiaotiyi.com/article/ejjpi.html