网站首页 » 前端开发 » 移动WEB » 移动端布局解决方案
上一篇:
下一篇:

移动端布局解决方案

前言

在移动 WEB 开发中页面整体框架的布局极其重要,如果你曾经感受过这种痛苦,你就会觉得这篇文章就是为你而写。还是那句话:好的开始,你就成功了一半。我们开始吧?

这也是我自己踩过的一个大坑,在项目中没有做好页面整体框架的规划,也就是整个页面上中下如何布局。对于头部和底部我用了fixed 看起来没有什么毛病,但在实践的使用中就会发现一些让你抓狂的 BUG。在 IOS(如:iphone 5s) 下弹出键盘,输入完内容发送后就你就看到一个很壮观的 BUG 顶部会先在屏幕中间出现,然后再回到屏幕顶部,如果你页面中有元素使用了 fixed 来实现一些固定效果,这样的闪跳非常的常见,于是我就一直在苦苦追寻一个比较折中的解决方案,接着这篇文章就出现了。

本文所说的这个解决方案也非常地简单,第一就是参考,第二就是引入一个 JS 库。

在世界里永远不会缺少参考的东西,只要你有发现目标的想法。布局我是参考淘宝网触版(弹性布局,而非传统的布局方式),内容滚动我引用了swiper 来实现(带橡皮筋效果)。在程序员的世界里没有比用代码沟通更直接了当,更让人明白的了,所有现在就为你上码:

HTML 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>移动布局解决方案</title>
    <link rel="stylesheet" href="../lib/css/swiper.min.css">
    <link rel="stylesheet" href="../lib/css/font-awesome.min.css">
    <link rel="stylesheet" href="./css/main.css">
</head>
<body>
<div class="view">
    <div class="scroll-view">
        <div class="top-fixed">
            <div class="header-box">
                <header class="header">
                    <div>云库网</div>
                </header>
                <nav class="nav">
                    <div class="nav-swiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">HTML5</div>
                            <div class="swiper-slide">CSS3</div>
                            <div class="swiper-slide">JavaScript</div>
                            <div class="swiper-slide">jQuyer</div>
                            <div class="swiper-slide">Angular</div>
                            <div class="swiper-slide">移动开发</div>
                            <div class="swiper-slide">前端导航</div>
                            <div class="swiper-slide">CMS</div>
                            <div class="swiper-slide">网站运营</div>
                            <div class="swiper-slide">朝夕熊博客</div>
                        </div>
                    </div>
                </nav>
            </div>
        </div>
        <div class="scroll-wrap swiper-container">
            <div class="scroll-content swiper-wrapper">
                <div class="swiper-slide">
                    <ul>
                        <li>第一个</li>
                        ......
                        <li>第N个</li>

                    </ul>
                </div>
           </div>
           <div class="swiper-scrollbar"></div>
        </div>
        <div class="bottom-fixed">
            <footer class="footer">
                <a href="">
                    <i class="fa fa-home" aria-hidden="true"></i>
                    <span>首页</span>
                </a>
                <a href="">
                    <i class="fa fa-road" aria-hidden="true"></i>
                    <span>学习</span>
                </a>
                <a href="">
                    <i class="fa fa-rss-square" aria-hidden="true"></i>
                    <span>订阅</span>
                </a>
                <a href="">
                    <i class="fa fa-user" aria-hidden="true"></i>
                    <span>我的</span>
                </a>
            </footer>
        </div>
    </div>
</div>

<script src="../lib/js/swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
    scrollbar: '.swiper-scrollbar',
    direction: 'vertical',
    slidesPerView: 'auto',
    mousewheelControl: true,
    freeMode: true
});

var navSwiper = new Swiper('.nav-swiper', {
    slidesPerView: "auto",
    spaceBetween: 30,
    freeMode: true
});

</script>
</body>
</html>
CSS 代码
/*
* @Author: 朝夕熊
* @Date:   2017-09-06 22:25:46
* @Last Modified by:   zhaoxixiong
* @Last Modified time: 2017-09-10 15:03:21
*/
html,body{
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.view{
    height: 100%;
    overflow: hidden;
}
.scroll-view{
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
     flex-direction: column;
}
.top-fixed{
    width: 100%;
    left: 0px;
    top: 0px;
    display: block;
}
.header-box{
    height: 80px;
}
.header{
    width: 100%;
    height: 45px;
    line-height: 45px;
    text-align: center;
    background: #373d41;
    color: #fff;
}
.nav{
    padding: 0 15px;
    border-bottom: 1px solid #ddd;
}
.scroll-wrap{
    width: 100%;
    display: block;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
    position: relative;
    -webkit-box-direction: normal;
}
.scroll-content{
    color: #000;
    width: 100%;
    position: absolute;
}
.bottom-fixed{
    left: 0px;
    bottom: 0px;
    width: 100%;
    display: block;
}
.footer{
    border-top: 1px solid #ddd;
    width: 100%;
    height: 50px;
    /*line-height: 50px;*/
    background: #373d41;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-box-align: center;
    -moz-box-align: justify;
    -ms-flex-align: center;
    -webkit-justify-content:center;
    justify-content:center;
    -moz-box-pack:center;
    -webkit--moz-box-pack:center;
    box-pack:center;
    align-content: center;
}
.footer a{
    font-size: 12px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    box-sizing: border-box;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content:center;
    justify-content:center;
    -moz-box-pack:center;
    -webkit--moz-box-pack:center;
    box-pack:center;
    text-align: center;
    text-decoration: none;
    color: #fff;
}
.footer a .fa{
    font-size: 24px;
}

.footer a span{
    margin-top: 2px;
}
/*重置 swiper 部分样式*/
.nav-swiper .swiper-wrapper .swiper-slide{
    width: auto;
    height: 35px;
    line-height: 35px;
}

.scroll-wrap .swiper-slide{
    padding: 0 12px;
}
.scroll-wrap .swiper-slide ul{
    padding: 0;
    margin:0;
}
.scroll-wrap .swiper-slide ul li{
    list-style: none;
    padding: 12px 0;
    border-bottom: 1px solid #ddd;
}
.scroll-wrap .swiper-slide {
    font-size: 18px;
    height: auto; /* 注意这个必需加 */
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
/* Scrollbar */
.scroll-wrap.swiper-container-vertical > .swiper-scrollbar {
  right: 0px;
  top: 0;
  height: 100%;
}
/*重置 swiper 部分样式 END*/

可以显示这里查看DEMO:http://yunkus.com/demo/mobile-layout-solution/

希望本文能给你在前端开发之路上带来一点点帮助,这样我就觉得我的文章没白写了。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/mobile-layout-solution/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END