移动端fixed布局兼容性不好,使用absolute布局来代替

在移动端使用fixed布局存在兼容性问题,因此使用absolute布局来代替

效果演示

 

src/app.vue里打好框架

<template>
  <div id="app" class="g-container">
    <div class="g-header-container">
      头部导航
    </div>
    <div class="g-view-container">
      <div class="content">
        内容区域
      </div>
      
    </div>
    <div class="g-footer-container">
      底部导航
    </div>
  </div>
</template>

<script>
  export default {
    name: 'App',}
</script>

<style scoped>
  .g-container{
    position: relative;
    width:100%;
    height:100%;
    max-width:640px;
    min-width:320px;
    margin:0 auto;
    overflow:hidden;  
  }
  .g-header-container{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    z-index:999;
    height:64px;
    background:pink; 
  }
  .g-view-container{
    height:100%;
    padding-bottom:80px;
    background:lightblue;
    overflow:auto;
  }
  .content{
    height:2000px;
  }
  .g-footer-;
    bottom:0;
    box-shadow:0 0 10px 0 hsla(0,6%,58%,0.6);
    height:80px;
    z-index:999;
    background:lightgreen;
  }
</style>

 

在main.js里引入首页文件的样式index.scss

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import 'babel-polyfill'
import fastclick from 'fastclick'
import Vue from 'vue'
import App from './App'
import router from './router'

给默认主页引入index.scss样式文件
import 'assets/scss/index.scss';

Vue.config.productionTip = false

给body元素设置fastclick
fastclick.attach(document.body);

/* eslint-disable no-new */
new Vue({
  el: '#app'
})

 

assets/scss/index.scss

*{
    margin:0;
    padding:0;
}
html,body{
     必须设置,否则内容滚动效果无法实现
    width:100%;
}

 

相关文章

https://segmentfault.com/a/1190000022018995 https://www....
ES6 (ECMAScript 6)中的模块是一个包含 JavaScript 代码的...
from https://mp.weixin.qq.com/s/-rc1lYYlsfx-wR4mQmIIQQ V...
D:\Temp&gt;npm init vite@latest vue3study --temp...
文章浏览阅读1.2k次。最近自己从零撸起的甘特图组件需要子组...
文章浏览阅读3.3k次,点赞3次,收藏16次。静默打印是什么?简...