zoukankan      html  css  js  c++  java
  • list之flex布局写法及禁止橡皮筋效果

    list之flex布局写法

    移动端实际场景中经常会遇到将header置顶,然后下面list需要滚动的情况,通常的做法会是将header使用fixed的方式固定到顶部,然后list主体相对于header的位置设置marginTop或者position的定位,这样的话做起来感觉有点别扭,也不贴合移动端的布局,而且position:fixed定位会在IOS8以下发生抖动现象,所以使用flex布局最佳。
        如果要禁用IOS的橡皮筋效果,可以使用下面橡皮筋禁止方法,也可以借用[inobounce](https://github.com/lazd/iNoBounce)库处理。
        .root的样式设置也可以替换为html和body设置height: 100%的方式处理,少写一个div标签,但是个人觉得这样的处理直接动html根标签不太合适,而且可控性不好,所以没有写出来。
    
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .root {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }
            .flexbox {
                display: flex;
                flex-direction: column;
                height: 100%;
            }
            header,
            footer {
                text-align: center;
                background-color: lightblue;
            }
            section {
                flex: 1;
                overflow: auto;
                -webkit-overflow-scrolling: touch;
            }
            section div:nth-of-type(2n) {
                background-color: lightcyan;
            }
        </style>
    </head>
    <body>
        <div class="root">
            <div class="flexbox">
                <header>Header</header>
                <section id="scroller">
                    <div>0</div>
                    <div>1</div>
                    <div>2</div>
                    <div>3</div>
                    <div>4</div>
                    <div>5</div>
                    <div>6</div>
                    <div>7</div>
                    <div>8</div>
                    <div>9</div>
                    <div>0</div>
                    <div>1</div>
                    <div>2</div>
                    <div>3</div>
                    <div>4</div>
                    <div>5</div>
                    <div>6</div>
                    <div>7</div>
                    <div>8</div>
                    <div>9</div>
                    <div>0</div>
                    <div>1</div>
                    <div>2</div>
                    <div>3</div>
                    <div>4</div>
                    <div>5</div>
                    <div>6</div>
                    <div>7</div>
                    <div>8</div>
                    <div>9</div>
                </section>
                <footer>Footer</footer>
            </div>
        </div>
        <script>
            // 橡皮筋禁止效果
            let startY;
            const scroller = document.getElementById('scroller');
            document.addEventListener('touchstart', e => {
                startY = e.touches[0].pageY;
            });
            document.addEventListener('touchmove', e => {
                const endY = e.touches[0].pageY;
                // 顶端不下滑
                if (endY > startY && scroller.scrollTop === 0) {
                    e.preventDefault();
                }
                // 底端不上滑
                if (endY < startY && scroller.scrollHeight - scroller.clientHeight === scroller.scrollTop) {
                    e.preventDefault();
                }
            }, {passive: false}); // 加passive是为了兼容部分IOS
        </script>
    </body>
    </html>
    
  • 相关阅读:
    vue之$nextTick详解
    vue动态组件,运用以及效果选项卡的运用
    深度解析vue之组件之间传值调用方法的奇淫技巧
    关于vuex模块化深层理解实例
    vue效果之改element的el-checkbox-group多选框组为单选可取消的单选框(样式还是多选框的样式)
    vue-div,文字无限滚动效果
    new webpack.ProvidePlugin vue模块化的全局引用
    实践开发:vue框架重点知识分析
    前端工程化,组件化,模块化,层次化
    开发中的细节整理
  • 原文地址:https://www.cnblogs.com/ljwk/p/10246392.html
Copyright © 2011-2022 走看看