yags-front/src/App.vue

<template>
    <div class="scroll-wrapper" id="scroll-wrapper" ref="scroll" @scroll="scrollEvent">
        <app-bar ref="bar"></app-bar>
        <router-view v-slot="{ Component }">
            <keep-alive :include="keeps">
                <component :is="Component" class="scroll-content" ref="content" :style="scrollStyle" />
            </keep-alive>
        </router-view>
        <phone-ver></phone-ver>
    </div>
</template>

<script>
import AppBar from './components/AppBar.vue';
import { computed } from 'vue';
import PhoneVer from './components/PhoneVer.vue';
export default {
    components: { AppBar, PhoneVer },
    name: 'App',
    provide() {
        return {
            setKeeps: this.setKeeps,
            bar: computed(() => this.barValue),
            content: computed(() => this.$refs.content),
            scrollWrapper: computed(() => this.$el),
            changeScroll: this.changeScroll,
            keeps: computed(() => this.keeps),
            bodyScroll: computed(() => this.bodyScroll),
            changeTab: this.changeTab
        };
    },
    inject: ['barHeight', 'appHeight'],
    computed: {
        barValue() {
            return this.$refs.bar;
        },
        scrollStyle() {
            return {
                boxSizing: 'border-box',
                minHeight: this.fullPage
                    ? this.appHeight
                    : `calc(${this.appHeight} - ${(this.barHeight || '0') + 'px'})`
            };
        }
    },
    data() {
        return {
            checkEvent: null,
            keeps: [],
            bodyScroll: 0,
            fullPage: false
        };
    },
    watch: {
        $route() {
            this.$nextTick(() => {
                this.$el.scrollTop = 0;
            });
            this.checkFull();
        }
    },
    mounted() {
        this.checkFull();
    },
    methods: {
        checkFull() {
            if (this.$route.meta.fullPage) {
                this.fullPage = true;
            } else {
                this.fullPage = false;
            }
        },
        setKeeps(keep = [], isAdd = true, isClear = false) {
            let keeps = [...this.keeps];
            if (isAdd) {
                keeps = [...keeps, ...keep];
            } else {
                keeps = keeps.filter(item => {
                    return !keep.includes(item);
                });
            }
            if (isClear) {
                keeps = [];
            }
            this.keeps = keeps;
        },
        changeScroll(scrollTop, isAnimate = false) {
            console.log(scrollTop);
            if (isAnimate) {
                this.$el.scrollTo({
                    top: scrollTop || 0,
                    behavior: 'smooth'
                });
            } else {
                this.$el.scrollTop = scrollTop || 0;
            }
        },
        scrollEvent() {
            // console.log(this.$el.scrollTop);
            this.bodyScroll = this.$el.scrollTop;
        },
        changeTab(color) {
            this.$refs.bar.getColor(color);
        }
    }
};
</script>

<style lang="less" scoped>
.scroll-content {
    box-sizing: border-box;
    // padding-top: 46px;
}
.scroll-wrapper {
    background-color: @bg;
}
</style>