Commit a486942c authored by 罗新东's avatar 罗新东
Browse files

app端tabbar覆盖页面其他位置。

parent 2e9d61e4

src/App.vue

+112 −94
Original line number Original line Diff line number Diff line
@@ -7,15 +7,15 @@ 
 * 版权所有，侵权必究！

 * 版权所有，侵权必究！

 *

 *

-->

-->



<template>

<template>

  <div id="app" :style="{height:appHeight}">

    <div id="app">

        <div :style="{ height: showTab ?appHeight:'100%' }" id="app-content">

            <transition :name="transitionName">

            <transition :name="transitionName">

                <keep-alive :include="cachePage">

                <keep-alive :include="cachePage">

                    <router-view class="router-view" />

                    <router-view class="router-view" />

                </keep-alive>

                </keep-alive>

            </transition>

            </transition>

    <div :style="{height:tabH}"></div>

        </div>

        <tab-bar v-if="showTab"></tab-bar>

        <tab-bar v-if="showTab"></tab-bar>

    </div>

    </div>

</template>

</template>
@@ -32,7 +32,7 @@ export default { 
            appHeight: "",

            appHeight: "",

            tabH: "",

            tabH: "",

            rempx: 0,

            rempx: 0,

      headH:'',

            headH: "",

            screenH: "",

            screenH: "",

            transitionName: "slide-left",

            transitionName: "slide-left",

            cachePage: [

            cachePage: [
@@ -49,20 +49,27 @@ export default { 
            ],

            ],

        };

        };

    },

    },



    mounted() {

    mounted() {

        let tabH =

        let tabH =

      document.getElementsByTagName("html")[0].style.fontSize.split("px")[0] *

            document

      1.33333;

                .getElementsByTagName("html")[0]

    let sH = window.screen.height;

                .style.fontSize.split("px")[0] * 1.33333;

    this.headH=document.getElementsByTagName("html")[0].style.fontSize.split("px")[0] *

        let sH = document.documentElement.clientHeight;

      1.5;+'px'

        this.headH =

            document

                .getElementsByTagName("html")[0]

                .style.fontSize.split("px")[0] * 1.5;

        +"px";

        this.appHeight = sH - tabH + "px";

        this.appHeight = sH - tabH + "px";

        this.tabH = tabH + "px";

        this.tabH = tabH + "px";

        this.screenH = sH + "px";

        this.screenH = sH + "px";

    },

    },

    computed: {

    computed: {

        showTab() {

        showTab() {

      return !["login", "login2","choose-people"].includes(this.$route.name);

            return !["login", "login2", "choose-people"].includes(

                this.$route.name

            );

        },

        },

    },

    },

    watch: {

    watch: {
@@ -95,8 +102,19 @@ export default { 
    overflow: hidden;

    overflow: hidden;

    position: relative;

    position: relative;

    overflow: hidden;

    overflow: hidden;

    height: 100vh;

    // z-index:999999999999

    // z-index:999999999999

}

}

#app-content {

    box-sizing: border-box;

    overflow: hidden;

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    overflow: hidden;

    z-index: 99999999;

}





.router-view {

.router-view {

    width: 100%;

    width: 100%;