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

1.png

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

我在这里使用了 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>

Logo

前往低代码交流专区

更多推荐