THJ_Mobile/src/packages/mobile/components/layouts/view/index.vue

<template>
    <div class="app-view">
        <slot name="header"></slot>
        <app-scroll-view :class="['app-view__body', flex && 'flex']">
            <slot></slot>
        </app-scroll-view>
        <slot name="footer"></slot>
    </div>
</template>

<script lang="ts" setup>
import { watch } from 'vue'

const props = defineProps({
    // 是否为过渡动画状态
    animationstart: {
        type: Boolean,
        default: false
    },
    // 过渡动画是否已结束，用于防止动画过程中渲染数据导致页面切换卡顿
    animationend: {
        type: Boolean,
        default: true
    },
    flex: {
        type: Boolean,
        default: false
    }
})

const emit = defineEmits(['update:animationend'])

watch(() => props.animationstart, (status) => {
    if (!status) {
        emit('update:animationend', true)
    }
}, {
    immediate: true
})
</script>

<style lang="less" scoped>
@import './index.less';
</style>