【111】Vue.js实现页面共用头部悬浮、共用底部跟随内容改变位置的例子。

页面具有共用头部和共用底部是一种常见的设计。头部多是链接或菜单，底部多是公司信息。为了让用户易于操作，我们常常将头部悬浮在页面上，方便用户随时操作 。而底部的公司信息对用户而言往往不重要，所以底部不采用悬浮的方案。这样当内容高度超过浏览器高度的时候，底部就在窗口之外，需要滚动才能看见。效果如图：

这里需要注意一个问题，就是如果中间内容高度太小，浏览器窗口高度太大，怎么办？
解决方法是，监控浏览器窗口改变大小的事件，然后设置中间区域的最小高度min-height属性。修改后的效果如图所示。

我在这里使用了 window 对象的 resize 事件和vuex。使用vuex的目的是：这种全局性质的事件，肯定在多个组件里都会用到。如果把 resize 事件分散到各个组件里，会产生两个问题。1、组件里写的事件响应有可能出现互相覆盖。2、为了避免重复响应事件，当不使用组件的时候，需要注销事件响应，把注销操作分散在各个组件里面，将来出问题的可能性较大。现在把事件放到根组件 App.vue里面，除非用户离开网站，否则不会停用App.vue。这就是为什么 App.vue 里面没有事件注销。

要得到演示的源代码，请先使用 git 克隆这个项目：https://gitee.com/zhangchao19890805/csdnBlog

然后找到 blog111 文件夹，这个文件夹里面的内容就是这篇博客的演示代码。

下面粘贴一下关键代码。

App.vue

<template>
    <div class="blog111-app">
        <router-view></router-view>
    </div>
</template>

<script>

export default {
    mounted(){
        // 窗口改变大小的事件。
        window.addEventListener("resize", ()=>{
            this.$store.dispatch("rootWindowResizeFlagAction");
        });
    }
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
    .blog111-app{
        width:100%;
    }
</style>

模板页面 index.vue

<template>
    <div :class="classPrefix">
        <zcHeader></zcHeader>
        <!-- 为了避免头部遮挡，而加的空白 -->
        <div :class="classPrefix+'_white'"></div>
        <div :style="contentStyle">
            <router-view></router-view>
        </div>
        <zcFooter></zcFooter>
    </div>
</template>

<script>
    import zcHeader from "./zcHeader.vue";
    import zcFooter from "./zcFooter.vue";

    export default {
        data(){
            return {
                classPrefix: "blog111-index_",
                
            };
        },

        mounted(){
            // 浏览器地址是/，就默认跳转到 home 首页。
            if ("index" == this.$route.name) {
                this.$router.replace({name:"home"});
            }
        },

        components:{
            zcHeader, zcFooter
        },

        computed:{
            // 控制中间内容区域的最小高度。如果内容太少，而浏览器窗口太高，
            // 就设置：中间内容区域最小高度 = 窗口高度 - 头部高度 - 底部高度 .
            // 本例子中，头部高度是40px，底部高度是40px，所以减80。
            contentStyle(){
                return {
                    padding:0,
                    margin: 0,
                    border: 0,
                    width: "100%",
                    height: "auto",
                    minHeight: this.$store.getters.rootWindowResizeFlag > -1 ? window.innerHeight - 80 + "px" : 0 
                }
            }
        }
    }
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
    .blog111-index_{
        margin:0;
        padding:0;
        border:0;

        &_white{
            margin:0;
            padding:0;
            border:0;
            width: 100%;
            height: 40px;
        }
    }
</style>