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

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

效果演示

 

src/app.vue里打好框架

 

在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',
  router,
  components: { App },
  template: ''
})

 

assets/scss/index.scss

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