legend_raex_front/src/App.vue

<template>
    <div class="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>
    </div>
</template>

<script>
import AppBar from './components/AppBar.vue';
import { computed } from 'vue';
export default {
    components: { AppBar },
    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)
        };
    },
    inject: ['barHeight'],
    computed: {
        barValue() {
            return this.$refs.bar;
        },
        scrollStyle() {
            return {
                boxSizing: 'border-box',
                minHeight: `calc(var(--app-height) - ${(this.barHeight || '0') + 'px'})`
            };
        }
    },
    data() {
        return {
            checkEvent: null,
            keeps: [],
            bodyScroll: 0
        };
    },
    watch: {
        $route() {
            this.$nextTick(() => {
                this.$el.scrollTop = 0;
            });
        }
    },
    methods: {
        setKeeps(keep = [], isAdd = true) {
            let keeps = [...this.keeps];
            if (isAdd) {
                keeps = [...keeps, ...keep];
            } else {
                keeps = keeps.filter(item => {
                    return !keep.includes(item);
                });
            }
            this.keeps = keeps;
        },
        changeScroll(scrollTop, isAnimate = false) {
            console.log(scrollTop);
            if (isAnimate) {
                this.$el.scrollTo({
                    top: scrollTop,
                    behavior: 'smooth'
                });
            } else {
                this.$el.scrollTop = scrollTop;
            }
        },
        scrollEvent() {
            // console.log(this.$el.scrollTop);
            this.bodyScroll = this.$el.scrollTop;
        }
    }
};
</script>

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