js学习总结----webapp之使用less构建响应式布局

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js学习总结----webapp之使用less构建响应式布局相关的知识,希望对你有一定的参考价值。

本章主要是对移动端的一些知识点的运用,模仿腾讯看比赛的移动端做的。具体代码如下

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="reset.min.css">
    <!--less-->
    <link rel="stylesheet/less" href="index.less">
    <script src=‘js/less-2.5.3.min.js‘></script>
</head>
<body>
    <section class=‘main‘>
        <!--HEADER-->
        <header class=‘header‘>
            <div class=‘con‘>
                <h1 class=‘logo‘>腾讯体育</h1>
                <span class=‘type‘>NBA</span>
                <span class=‘menu‘></span>
                <span class=‘login‘>登录</span>
            </div>
            <nav class=‘nav‘>
                <a href="#">NBA</a>
                <a href="#">CBA</a>
                <a href="#">英超</a>
                <a href="#">欧冠</a>
                <a href="#">亚冠</a>
                <a href="#">西甲</a>
                <a href="#">意甲</a>
                <a href="#">德甲</a>
                <a href="#">法甲</a>
                <a href="#">中超</a>
                <a href="#">NFL</a>
                <a href="#">综合</a>
                <a href="#">欧洲</a>
                <a href="#">社区</a>
                <a href="#">下载</a>
            </nav>
        </header>
        <!--video 只有preload=‘none‘的时候 poster才起作用 -->
        <section class="videoArea">
            <video src="1.mp4" controls preload="none" poster="img/poster.jpg"></video>
        </section>
        <!--match info -->
        <section class="matchInfo">
            <!--<div class="top">-->
                <!--<div class="home">-->
                    <!--<img src="1.png" >-->
                    <!--<span>96</span>-->
                <!--</div>-->
                <!--<div class="time">06月09日 09:00</div>-->
                <!--<div class="away">-->
                    <!--<span>96</span>-->
                    <!--<img src="1.png" >-->
                <!--</div>-->
            <!--</div>-->
            <!--<div class="middle">-->
                <!--<span></span>-->
            <!--</div>-->
            <!--<div class="bottom">-->
                <!--<span class="home">123434312</span>-->
                <!--<span class="type">NBA季后赛</span>-->
                <!--<span class="away">123412423</span>-->
            <!--</div>-->
        </section>
        <!--match list-->
        <section class=‘matchList‘>
            <ul class=‘clear‘>
                <li class=‘bg‘>
                    <div>
                        <img src="xxx.jpg" alt="">
                        <span>02:03</span>
                    </div>
                    <p>sadsadsadsdsa</p>
                </li>
            </ul>
        </section>
    </section>
    

    <script charset=‘utf-8‘ src=‘js/zepto.min.js‘></script>
    <script charset=‘utf-8‘ src=‘js/iscroll-5.1.3.min.js‘></script>
    <script charset=‘utf-8‘ src=‘js/ejs.min.js‘></script>
    <script charset="utf-8" type="text/template" id="matchInfoTemplate">
        <div class="top">
            <div class="home">
                <img src="<%=matchInfo.leftBadge%>" alt="">
                <span><%=matchInfo.leftGoal%></span>
            </div>
            <div class="time"><%=matchInfo.startTime.formatTime({1}月{2}日{3}:{4})%></div>
            <div class="away">
                <span><%=matchInfo.rightGoal%></span>
                <img src="<%=matchInfo.rightBadge%>" alt="">
            </div>
        </div>
        <div class="middle">
            <span></span>
        </div>
        <div class="bottom">
            <span class="home" type="1"><%=matchInfo.leftSupport%></span>
            <span class="type"><%=matchInfo.matchDesc%></span>
            <span class="away" type="2"><%=matchInfo.rightSupport%></span>
        </div>
    </script>
    <script charset=‘utf-8‘ type=‘text/template‘ id=‘matchListTemplate‘>
        <%$.each(matchList,function(index,item){%>
        <li class=bg>
            <div>
                <img src="<%=item.pic%>" alt="">
                <span><%=item.duration.substring(item.duration.indexOf(:)+1)%></span>
            </div>
            <p>sadsadsadsdsa</p>
        </li>
        <%})%>
    </script>
    <script charset=‘utf-8‘ src=‘js/index.js‘></script>
</body>
</html>

public.less

@cL:#555,#999,#ebf0f5,#fff,#1c90f2,#f82d2d;
@url:‘../img‘;
.transition(@property:all,@duration:1s,@time-function:linear,@delay:0s){
    -webkit-transition:@arguments;
    transition:@arguments;
}

index.less

@import (reference)  ‘public‘;
html{
    font-size:100px
}
html,body{
    width:100%;
    color:extract(@cL,1);
    background:extract(@cL,3);
    overflow-x:hidden;
}
a,a:active,a:visited,a:hover,a:target{
    display:block;
    color:extract(@cL,1);
}
.main{
    margin:0 auto;
    max-width:6.4rem;
}
/*HEADER*/
.header{
    /*con*/
    .con{
        height:.88rem;
        line-height:.88rem;
        font-size:.32rem;
        color:extract(@cL,4);
        background:extract(@cL,5);
        .logo,.type{
            float:left
        }
        .login,.menu{
            float:right
        }
        .logo{
            padding-left:.7rem;
            width:1.44rem;
            border-right:.02rem solid #066DC4;
            font-size:.32rem;
            font-weight:normal;
            background:url(‘@{url}/icon-logo.png‘) no-repeat .1rem center;
            background-size:.48rem;
        }
        .type{
            padding:0 .2rem;            
        }
        .login{
            padding:0 .3rem;
        }

        .menu{
            width:.88rem;
            height:.88rem;
            background:url(‘@{url}/btn-nav-fold.png‘) no-repeat center center;
            background-size:.48rem;
        }
    }
    .nav{
        padding:0 0;/*.1rem 0*/
        height:0;/*2.22rem*/
        background:#fff;
        font-size:.32rem;
        overflow:hidden;
        .transition(@duration:.3ms,@property:height);

        a{
            float:left;
            width:16%;
            height:.74rem;
            line-height:.74rem;
            text-align:center;
            &:nth-child(6n+1){
                margin-left:2%;
            }
        }
    }
    /*video*/
    .videoArea{
        height:3.6rem;
        background:rgba(0,0,0,1);
        video{
            width:100%;
            height:100%;
        }
    }
    /*match info*/
    .matchInfo{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        background: extract(@cL,4);
        padding:.3rem;
        height:2.04rem;
        overflow:hidden;
        .top{
            height:.6rem;
            line-height:.6rem;
            .home,.away{
                float:left;
                width:34%;
                img{
                    display:inline-block;
                    width:.64rem;
                    height:.6rem;
                }
                span{
                    display:inline-block;
                    font-size:.4rem;
                    vertical-align:top;
                }
            }
            .home{
                span{
                    margin-left:.24rem;
                }
            }
            .time{
                float:left;
                width:32%;
                font-size:.24rem;
                color:extract(@cL,2);
                text-align:center;
            }
            .away{
                text-align:right;
                span{
                    margin-right:.24rem;
                }
            }
        }
        .middle{
            position: relative;
            margin:.2rem auto;
            height:.04rem;
            background:extract(@cL,5);
            span{
                position:absolute;
                top:0;
                left:0;
                width:0;
                height:.04rem;
                background:extract(@cL,6);
                .transition(@duration:.5s);
            }
        }
        .bottom{
            height:.4rem;
            line-height:.4rem;
            text-align: center;
            span{
                float:left;
                width:34%;
                font-size:.24rem;
                color:extract(@cL,2);
            }
            .type{
                width:32%;
            }
            .home{
                background:url(‘@{url}/support-left.png‘) no-repeat left center;
                background-size:.24rem;
                &.bg{
                    color:extract(@cL,6);
                    background:url(‘@{url}/support-red.png‘) no-repeat left center;
                    background-size:.24rem;
                }
            }
            .away{
                background:url(‘@{url}/support-right.png‘) no-repeat right center;
                background-size:.24rem;
                &.bg{
                    color:extract(@cL,5);
                    background:url(‘@{url}/support-blue.png‘) no-repeat left center;
                    background-size:.24rem;
                }
            }
        }
        
    }
    /*match list*/
    .matchList{
        box-sizing:border-box;
        width:100%;
        padding:.2rem .3rem;
        background:extract(@cL,4);
        overflow:hidden;
        li{
            float:left;
            margin-right:.2rem;
            width:2.2rem;
            div{
                position:relative;
                width:100%;
                height:1.24rem;
                img{
                    width:100%;
                    height:100%;
                }
                span{
                    position:absolute;
                    right:0;
                    bottom:0;
                    padding:.08rem;
                    height:.31rem;
                    color:extract(@cL,4);
                    background:rgba(0,0,0,0.2);
                }
            }
            &.bg{
                color:extract(@cL,6)
            }
            p{
                font-size:.24rem;
                line-height:.3rem;

            }

        }
    }

}

index.js

//REM
~function(){
    var desW = 640,
        winW = document.documentElement.clientWidth || document.body.clientWidth;
    if(winW>desW){
        $(‘.main‘).css(‘width‘,desW);
        return;
    }
    document.documentElement.style.fontSize = winW / desW*100+‘px‘;
}()

//HEADER
~function(){
    var $header = $(‘.header‘),
        $menu = $header.find(‘.menu‘),
        $nav = $header.children(‘.nav‘);
    $menu.tap(function(){
        if($(this).attr(‘isBlock‘)===‘true‘){
            $nav.css({
                height:‘0‘
            })
            var timer = window.setTimeout(function(){
                $nav.css({
                    padding:‘0‘
                })
                window.clearTimeout(timer);
            },300)
            $(this).attr(‘isBlock‘,false);
            return;
        }
        $nav.css({
            padding:‘.1rem 0‘,
            height:‘2.22rem‘
        })
        $(this).attr(‘isBlock‘,true);
    })
}()
//match info
var matchRender = (function(){
    var $matchInfo = $(‘.matchInfo‘),
        $matchInfoTemplate = $(‘#matchInfoTemplate‘);

    function bindEvent(){
        //获取本地存储的信息,判断是否有支持
        var support = localStorage.getItem(‘support‘);
        if(support){
            support = JSON.parse(support);
            if(support.isTap){
                $bottom.attr(‘isTap‘,true);
                support.type==1?$bottomLeft.addClass(‘bg‘):$bottomRight.addClass(‘bg‘);
            }
        }
        $matchInfo.tap(function(ev){
            var tar = ev.target,
                tarTag = tar.tagName,
                tarP = tar.parentNode,
                $tar = $(tar),
                $tarP = $tar.parent(),
                tarInn = $tar.html();
            if(tarTag===‘SPAN‘ && tarP.className===‘bottom‘){
                var $bottom = $matchInfo.children(‘.bottom‘),
                    $bottomLeft = $bottom.children(‘.home‘),
                    $bottomRight = $bottom.children(‘.away‘);
                if(tar.className===‘type‘) return;
                if($bottom.attr(‘isTap‘)===‘true‘) return;
                $tar.html(parseFloat(tarInn)+1).addClass(‘bg‘);

                //重新计算计算进度条

                $matchInfo.children(‘.middle‘).children(‘span‘).css(‘width‘,(parseFloat($bottomLeft.html())/(parseFloat($bottomLeft.html())+parseFloat($bottomRight.html())))*100+‘%‘);
                //告诉浏览器支持的是谁
                $.ajax({
                    url:‘xxx.html&type=‘+$tar.attr(‘type‘),
                    dataType:‘jsonp‘
                })

                //只能点击一次
                $bottom.attr(‘isTap‘,true);
                localStorage.setItem(‘support‘,JSON.stringify({
                    "isTap":true,
                    "type":$tar.attr(‘type‘)

                }))
            }

        })
    }
    function bindHTML(matchInfo){
        $matchInfo.html(ejs.render($matchInfoTemplate.html(),{matchInfo:matchInfo}));
        //控制进度条:定时器是给HTML页面一定的渲染时间
        window.setTimeout(function(){
            var leftNum = parseFloat(matchInfo.leftSupport),
                rightNum = parseFloat(matchInfo.rightSupport);
            $matchInfo.children(‘.middle‘).children(‘span‘).css(‘width‘,(leftNum/(leftNum+rightNum))*100+‘%‘);
        },500)
        bindEvent();

    }
    return {
        init:function(){
            //GET PATH
            $.ajax({
                url:‘xxx.url‘,
                dataType:‘jsonp‘,
                success:function(result){
                    if(result && result[0]==0){
                        result=result[1];
                        var matchInfo = result[‘matchInfo‘];
                        matchInfo[‘leftSupport‘] = result[‘leftSupport‘];
                        matchInfo[‘rightSupport‘] = result[‘rightSupport‘];

                        //bind html
                        bindHTML();
                    }
                }

            })
        }
    }

})()
matchRender.init();
//match list
var matchListRender = (function(){
    var $matchList = $(‘.matchList‘),
        $matchListUL = $matchList.children(‘ul‘),
        $matchListTemplate = $(‘#matchListTemplate‘);
    function BindHTML(matchList){
        $matchListUL.html(ejs.render($matchListTemplate.html(),{matchList:matchList})).css(‘width‘,parseFloat(document.documentElement.style.fontSize)*2.4*matchList.length+‘px‘);
        //实现局部滚动
        new IScroll(‘.matchList‘,{
            scrollX:true,
            scrollY:false,
            click:true
        })
    }
    return{
        init:function(){
            $.ajax({
                url:‘xxx.url‘,
                dataType:‘jsonp‘,
                success:function(result){
                    if(result && result[0]==0){
                        result = result[1][‘stats‘];
                        var matchList = null;
                        $.each(result,function(index.item){
                            if(item[‘type‘]==9){
                                matchList = item[‘list‘];
                                return false;
                            }
                        })
                        //Bind html
                        BindHTML(matchList);
                    }
                }
            })
        }
    }
})()
matchListRender.init();

 

以上是关于js学习总结----webapp之使用less构建响应式布局的主要内容,如果未能解决你的问题,请参考以下文章

js学习总结----less常用的方法

Angular JS仿拉勾网 WebApp 开发移动端单页应用

17-8-26-WebApp总结

webpack前端构建工具学习总结之webpack.config.js配置文件

Maven学习总结二:使用myEclipse和命令行构建Maven项目

Vuejs2.0构建一个彩票查询WebAPP