h5移动端上下布局

最新推荐文章于 2021-12-20 20:42:58 发布

MrSuperPorter

最新推荐文章于 2021-12-20 20:42:58 发布

阅读量844

点赞数

分类专栏： js

本文链接：https://blog.youkuaiyun.com/qq_28473733/article/details/104111613

版权

js 专栏收录该内容

84 篇文章

订阅专栏

本文详细探讨了在H5移动端实现上下布局的各种方法，包括Flexbox布局、Grid布局以及传统的CSS定位技术。通过实例代码展示如何适配不同屏幕尺寸，确保内容区域和头部/底部栏稳定显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="home" id="home">
    <div class="header">头部</div>
    <div class="content">
      <div class="nav">导航</div>
      <div class="banner">banner</div>
      <div class="list-box">
        <div class="list-tab" :class="{'move':scrollTopMove}">list-tab</div>
        <ul>
          <li v-for="item in 100">
            {{item}}
          </li>
        </ul>
      </div>
    </div>
    <div class="bottom-nav">底部</div>
  </div>
</template>

<script>


  export default {
    name   : 'Gift',
    data() {
      return {
        scrollTop:0
      }
    },
    mounted() {
      var last_known_scroll_position = 0;
      var ticking = false;
      let _this = this;

      function doSomething(scroll_pos) {
        console.log('scroll_pos',scroll_pos)
        _this.scrollTop = scroll_pos
      }

      window.addEventListener('scroll', (e)=> {
        last_known_scroll_position = window.scrollY|(window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop);
        if (!ticking) {
          window.requestAnimationFrame(()=> {
            doSomething(last_known_scroll_position);
            ticking = false;
          });
        }
        ticking = true;
      });

    },
    computed: {
      scrollTopMove(){
        return this.scrollTop > 200
      }
    },
    methods: {
      scroll(e) {
        this.scrollTop = e.target.scrollTop
      }
    }
  }
</script>

<style lang="less">
  .home {
    /*position: absolute;
    top: 0;
    left: 0;*/
    width: 100%;
    height: 100%;
    //overflow: auto;
    padding-top: 50px;
    padding-bottom: 50px;
    .header {
      height: 50px;
      background: beige;
      font-size: 30px;
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1000;
    }

    .nav {
      height: 80px;
      background: green;
    }

    .content {
      width: 100%;
      height: 100%;
      background: #ccc;
    }

    .banner {
      height: 200px;
      background: #ea5e56;
    }

    .list-tab {
      width: 100%;
      height: 50px;
      text-align: center;
      background: fuchsia;
    }

    .move {
      position: fixed;
      top: 50px;
    }

    .bottom-nav {
      width: 100%;
      height: 50px;
      background: beige;
      font-size: 30px;
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 1000;
    }
  }

</style>