乐淘首页思路 - Githubissues

首页制作思路

mui相关参考

http://ask.dcloud.net.cn/article/818

创建html基本结构

<!--这块每个编辑器生成的不一定是一模一样，大家不用介意-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

</body>
</html>

添加viewport

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"/>

添加mui.css,mui.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
+    <link rel="stylesheet" href="./assets/mui/css/mui.css">
</head>
<body>
+    <script src="./assets/mui/js/mui.js"></script>
</body>
</html>

添加整个项目的容器.lt_container,并添加样式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./assets/mui/css/mui.css">
    <style>
+    .lt_container{
+        position: absolute;
+        left:0;
+        top:0;
+        width:100%;
+        height:100%;
+        background:pink;
+    }
    </style>
</head>
<body>
+    <div class="lt_container">

+    </div>
    <script src="./assets/mui/js/mui.js"></script>
</body>
</html>

为什么在最外面要设置height:100%的时候同时设置position:absolute?

如果不设置position:absolute的话，则当前div还是在文档流当中，被body和html管理，如果body,html不设置height为100%的话，则当前div的高度设置height:100%最后还是0px,我们这里设置当前的div的高度是100%，就脱离了文档流，它的地位和html一样了，所以这里的height:100%参考的是浏览器的窗口

按页面的结构分为上、主体、下三部分组成，进一步分析可以得知上、下部分永远也不动，所以考虑用绝对定位来实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./assets/mui/css/mui.css">
    <style>
    .lt_container{
        position: absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background:pink;
    }
    .lt_topBar{
        position: absolute;
        left:0;
        top:0;
        width:100%;
        height:44px;
        background:rgb(240, 6, 49);
    }
    .lt_tabBar{
        position: absolute;
        left:0;
        bottom: 0;
        width:100%;
        height: 55px;
        background:rgb(227, 13, 52);
    }
    .lt_content{

    }
    </style>
</head>
<body>
    <div class="lt_container">
        <div class="lt_topBar">

        </div>
        <div class="lt_content">

        </div>
        <div class="lt_tabBar">

        </div>
    </div>
    <script src="./assets/mui/js/mui.js"></script>
</body>
</html>

实现主体部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./assets/mui/css/mui.css">
    <style>
    .lt_container{
        position: absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background:pink;
    }
    .lt_topBar{
        position: absolute;
        left:0;
        top:0;
        width:100%;
        height:44px;
        background:rgb(240, 6, 49);
    }
    .lt_tabBar{
        position: absolute;
        left:0;
        bottom: 0;
        width:100%;
        height: 55px;
        background:rgb(227, 13, 52);
    }
    .lt_content{
        height: 100%;
        padding-top:44px;
        padding-bottom: 55px;
    }
    </style>
</head>
<body>
    <div class="lt_container">
        <div class="lt_topBar">

        </div>
        <div class="lt_content">

        </div>
        <div class="lt_tabBar">

        </div>
    </div>
    <script src="./assets/mui/js/mui.js"></script>
</body>
</html>

添加mui的区域滚动组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./assets/mui/css/mui.css">
    <style>
    .lt_container{
        position: absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background:pink;
    }
    .lt_topBar{
        position: absolute;
        left:0;
        top:0;
        width:100%;
        height:44px;
        background:rgb(240, 6, 49);
    }
    .lt_tabBar{
        position: absolute;
        left:0;
        bottom: 0;
        width:100%;
        height: 55px;
        background:rgb(227, 13, 52);
    }
    .lt_content{
        height: 100%;
        padding-top:44px;
        padding-bottom: 55px;
    }
    </style>
</head>
<body>
    <div class="lt_container">
        <div class="lt_topBar">

        </div>
        <div class="lt_content">
                <div class="mui-scroll-wrapper">
                        <div class="mui-scroll">
                            <!--这里放置真实显示的DOM内容-->
                        </div>
                    </div>
        </div>
        <div class="lt_tabBar">

        </div>
    </div>
    <script src="./assets/mui/js/mui.js"></script>
</body>
</html>

发现有bug，分析原因得知.mui-scroll-wrapper被设置为position:absolute;了，根据我们的理解，它的父级容器没有设置相对定位则会往上一层去找，所以，我们可以考虑给.lt_container设置position:relative,但是这样就会有问题，因为.mui-scroll-wrapper的top值是0，所以还是会覆盖掉.topBar，所以，为了解决问题，我们在.lt_content与.mui-scroll-wrapper之间再套一层div容器.lt_wrapper

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./assets/mui/css/mui.css">
    <style>
    .lt_container{
        position: absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background:pink;
    }
    .lt_topBar{
        position: absolute;
        left:0;
        top:0;
        width:100%;
        height:44px;
        background:rgb(240, 6, 49);
    }
    .lt_tabBar{
        position: absolute;
        left:0;
        bottom: 0;
        width:100%;
        height: 55px;
        background:rgb(227, 13, 52);
    }
    .lt_content{
        height: 100%;
        padding-top:44px;
        padding-bottom: 55px;
    }
    .lt_wrapper{
        height:100%;
        position: relative;
    }
    </style>
</head>
<body>
    <div class="lt_container">
        <div class="lt_topBar">

        </div>
        <div class="lt_content">
            <div class="lt_wrapper">
                    <div class="mui-scroll-wrapper">
                            <div class="mui-scroll">
                                <div style="background:blue;height:1000px;">aaaaa</div>
                            </div>
                        </div>
            </div>
        </div>
        <div class="lt_tabBar">

        </div>
    </div>
    <script src="./assets/mui/js/mui.js"></script>
    <script>
    mui('.mui-scroll-wrapper').scroll({
    deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
});
    </script>
</body>
</html>

zhengwei1949 / myblog

乐淘首页思路 #102