temple-h5/src/App.vue

<template>
    <div class="app-safe-area" :style="{minHeight: minHeight + 'px'}">
        <div id="app" :data-height="minHeight - tabHeight" :style="{ minHeight: minHeight - tabHeight + 'px', paddingBottom: tabHeight + 'px'}">
            <router-view />
            <van-tabbar v-if="showTabbar" class="tabbar" v-model="actionRoute" ref="tabbar" active-color="#CF9E3B" inactive-color="#999">
                <van-tabbar-item replace name v-for="(tab, index) in tabbar" :key="index" @click="onNavigation(tab)">
                    <span>{{ tab.title }}</span>
                    <template #icon="props">
                        <img :src="props.active ? tab.active: tab.inactive" alt="">
                    </template>
                </van-tabbar-item>
            </van-tabbar>
        </div>
    </div>
</template>

<script>
import { tabbar } from '../src/router';
import safeAreaInsets from 'safe-area-insets';
export default {
    name: 'App',
    data() {
        return {
            active: '3',
            minHeight: 0,
            tabbar,
            tabHeight: 0,
            // actionRoute: 0
        };
    },
    provide() {
        return {
            root: this,
            refs: this.$refs,
            safeAreaInsetBottom: safeAreaInsets.bottom,
            screenHeight: window.innerHeight - safeAreaInsets.bottom,
            parentHeight: this.minHeight - this.tabHeight,
            minHeight: this.minHeight,
        };
    },
    watch: {
        '$route': {
            handler(val) {
                document.title = val.meta.title || '自在福田'
                this.active = tabbar.map(v => v.name).indexOf(val.name).toString();
            },
            deep: true,
        },
        showTabbar: {
            handler() {
                this.$nextTick(() => {
                    const { tabbar } = this.$refs;
                    this.tabHeight = tabbar ? tabbar.$el.offsetHeight - safeAreaInsets.bottom: 0;
                })
            },
            immediate: true,
        }
    },
    mounted(){
        this.$store.commit('SET_LAUNCH', this.$route.query)
        setTimeout(() => {
            this.minHeight = window.innerHeight - safeAreaInsets.bottom;
        }, 30)
    },
    methods: {
        onNavigation(tab){
            const { path } = this.$route;
            if(path === tab.path) return;
            this.$router.push({ path: tab.path, query: { temple_id: this.$route.query.temple_id}})
        }
    },
    computed: {
        actionRoute: {
            get(){
                const { tabbar } = this;
                return tabbar.map(tab => tab.name).indexOf(this.$route.name)
            },
            set(){ }
        },
        showTabbar() {
            const path = tabbar.map(tab => tab.name);
            const { name, query: { hideTab } } = this.$route;

            // 等于寺庙功德箱时隐藏底部导航
            if(name === 'merit-box' || (name === 'temple-list' && hideTab === '1')){
                return false
            }
            return path.includes(this.$route.name);
        },
        paddingBottom() {
            return this.showTabbar ? this.$refs.tabbar ? this.$refs.tabbar.$el.offsetHeight : 0 : 0;
        }
    }
};
</script>

<style lang="scss">
@import '~@/assets/css/reset.css';
@import '//at.alicdn.com/t/font_2897403_8d7w3rodyu2.css';
.app-safe-area{
    position: relative;
    padding-bottom: env(safe-area-inset-bottom);
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        max-width: 750px;
        margin-left: auto;
        margin-right: auto;
        min-height: 100%;
    }
    .tabbar {
        /* padding-top: .57rem; */
        /* background: url('~@/assets/img/bg.png') top center no-repeat; */
        /* background-size: contain; */
        position: fixed;
        bottom: 0;
    }
}
.loadmore{
    font-size: .4rem;
    text-align: center;
    color: #888;
    padding: .4rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    .icon{
        width: .6rem;
        vertical-align: middle;
        margin-right: .2rem;
        animation: loading 3s linear infinite;
    }
}

.icon-home{
    width: 1.1rem;
    height: 1.1rem;
    font-size: .5rem;
    background: white;
    border: 1px solid #ddd;
    border-radius: 1rem;
    position: absolute;
    left: .4rem;
    top: .4rem;
    &:active{
        background: #f1f1f1;
    }
}

.no-more{
    font-size: .4rem;
    text-align: center;
    color: #888;
    padding: .4rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.read-more{
    height: 1.3rem;
    text-align: center;
    font-size: .4rem;
    line-height: 1.3rem;
    color: #888;
}

@keyframes loading {
    from{
        transform: rotateZ(0);
    }
    to{
        transform: rotateZ(-360deg);
    }
}
</style>