layui框架的flow组件的核心用法有哪些?-创新互联

该模块包含 信息流加载 和  图片懒加载  两大核心支持,无论是对服务端、还是前端体验,都有非常大的性能帮助。下边分别给出了这两种技术的使用方法:

创新互联成立于2013年,我们提供高端重庆网站建设公司成都网站制作成都网站设计、网站定制、全网整合营销推广成都小程序开发、微信公众号开发、seo优化服务,提供专业营销思路、内容策划、视觉设计、程序开发来完成项目落地,为玻璃隔断企业提供源源不断的流量和订单咨询。

一、信息流加载

信息流加载的核心方法时  flow.load(options) ,下边给了一个模拟加载新闻列表的栗子

前端html和js


    

    后台服务器代码

    public class HomeController : Controller
        {
            // GET: Home
            public ActionResult Index()
            {
                return View();
            }
            public ActionResult GetList(int page)
            {
               //简单数据库中新闻
                List newsList = new List();
                for (int i = 0; i < 55; i++)
                {
                    newsList.Add("新闻" + i);
                }
               //总页数
                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中的图片懒加载十分简单,将图片的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框架的flow组件常见用法总结的详细内容,更多请关注创新互联成都网站设计公司其它相关文章!

    另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


    网页标题:layui框架的flow组件的核心用法有哪些?-创新互联
    浏览路径:http://scyanting.com/article/ejjpi.html