浅谈前端自学经历---初识layui框架--致自学前端的友友们!以此共勉~

      这是我第一次写博客,以前吧!也就听说,也见过别人博客的经验分享,但是自己从未实操过,今天突然想来试着写写,以记录自己自学前端的点滴,以此来共勉!

        可以说从去年10月份我一直专注于前端这一块,条件有限,没有去培训机构,有人说:那你为什么不去贷款?吼吼~贷款我也怕还不起啊!其实也是对自己的信心不足,不确定自己能不能学好,万一培训出来还是找不到工作呢?或者木有想像中的能学的很好呢?再说了,贷款还要多给别人钱(利息),在这里我也是不怎么看的过去的,当然,我也知道,天下木有白吃的餐~就算有也一定有代价!我在生活中也是一个比较纠结的人,遇到问题我总是会依赖别人,而这些对于自学前端的我是简直的缺点,我也有曾经依赖于去培训解决问题,其实光靠老师讲还是不行的,要靠自己实践,摸索才能学的更好~当然也少不了与人交流,所以正是因为纠结,我时常跟我表哥(也是自学前端过来的)交流,他现在能学到全栈,在我看来也是不容易,了不得的,他有建议我自学的话就自学,毕竟条件有限嘛~也给我指了些方向,不要老觉得培训出来就一定会学的好,还是得靠自己;经过交流后,我越发感觉自己像是拿培训作为自己的后路,但要是真正去了(培训),没有达到预期的效果,我是不是又会不好想?再说了,我也自学了那么久(认真学差不多两三个月吧!),如果进培训机构,那自学的时间是不是就浪费了~

·       好了,闲聊了一下,还是老老实实自学吧~(时间不足,只能浅谈谈~)

        近期,我试岗了一家公司,公司用的框架有layui的前端UI框架,我也去抽空了解了一下

   跟着示例完成了“加载更多”的功能,代码示例如下:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,inital-scale=1,maximum-scale=1">

    <title>layui初学</title>

    <link rel="stylesheet" href="../layui/css/layui.css">

    <style>

        .flow-default {

            width: 600px;

            height: 400px;

            overflow: auto;

            font-size: 0;

        }

        .flow-default li {

            display: inline-block;

            margin: 0 5px;

            font-size: 14px;

            width: 48%;

            margin-bottom: 10px;

            height: 100px;

            line-height: 100px;

            text-align: center;

            background-color: #eee;

        }

        .flow-default img {

            width: 100%;

            height: 100%;

        }

    </style>

</head>

<body>

        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">

            <legend>信息流 - 手工加载</legend>

        </fieldset>

        <ul class="flow-default" style="height: 300px;" id="LAY_demo2"></ul>

    <script src="../layui/layui.js"></script>

    <script>

        layui.use('flow', function(){

            var flow = layui.flow;

            flow.load({

                elem: '#LAY_demo2' //流加载容器

                ,scrollElem: '#LAY_demo2' //滚动条所在元素,一般不用填,此处只是演示需要。

                ,isAuto: false

                ,isLazyimg: true

                ,done: function(page, next){ //加载下一页

                //模拟插入

                setTimeout(function(){

                    var lis = [];

                    for(var i = 0; i < 6; i++){

                   lis.push('<li><img lay-src="http://s17.mogucdn.com/p2/161011/upload_279h87jbc9l0hkl54djjjh42dc7i1_800x480.jpg?v='+ ( (page-1)*6 + i + 1 ) +'"></li>')

                    }

                    next(lis.join(''), page < 6); //假设总页数为 6

                }, 500);

                }

            });

        });

    </script>

</body>

</html>

温馨提示:请复制这段代码的友友们将css/js文件改为自己本地路径,就可以查看效果啦!

今天的时间就到这里,再晚一些食堂估计就木有饭啦~(毕竟武汉这个地方只有学校食堂还比较能吃的划算~)

写的不怎么样!希望大伙能多多提点提点,交流交流啊!

猜你喜欢

转载自blog.csdn.net/lha1995/article/details/81156791