老师，为什么我点击tab的时候，content的切换很奇怪

我在男装页面点击女装页面的时候，loading遮挡层出现之后，会先闪现男装的页面，再变成女装页面，这要怎么办？？

<template>

    <div class="content-wrapper">

        <div class="loading-container" v-if="isLoading">

            <div class="loading-wrapper">

                <me-loading class="mine-loading"></me-loading>

            </div>

        </div>

        <me-scroll ref="scroll">

            <div class="content">

                <div class="pic" v-if="content.banner">

                    <a class="pic-link" :href="content.banner.linkUrl">

                        <img @load="updataScroll" class="pic-img" :src="content.banner.picUrl" alt="">

                    </a>

                </div>

                <div class="section" v-for="(section, index) in content.data" :key="index">

                    <h4 class="section-title">{{section.name}}</h4>

                    <ul class="section-list" >

                        <li class="section-item" v-for="(item, i) in section.itemList" :key="i">

                            <a class="section-link" :href="item.linkUrl">

                                <img class="section-pic" v-lazy="item.picUrl" :alt="item.name">

                            </a>

                        </li>

                    </ul>

                </div>

            </div> 

        </me-scroll>

    </div>  

</template>

<script>

import MeLoading from 'base/loading'

import MeScroll from 'base/scroll'

import {getCategoryComtent} from 'api/category.js'

export default {

    name: 'CategoryContent',

    data(){

        return {

            content: {},

            isLoading: true

        }

    },

    props: {

        getId: {

            type: String,

            default: ''

        }

    },

    watch: {

        getId(id) {

            this.isLoading = true

            this.getContent(id).then(() => {

                this.updataScroll()

                this.isLoading = false

            })

        }

    },

    methods: {

        getContent(id) {

            return getCategoryComtent(id).then(data => {

                this.content = data.content

            })

        },

        updataScroll() {

            this.$refs.scroll && this.$refs.scroll.updateScroll()

        }

    },

    components: {

        MeLoading,

        MeScroll

    }

}

</script>

<style lang="scss" scoped>

@import '~assets/scss/mixins';

    .content-wrapper {

        position: relative;

        height: 100%;

    }

    .loading-container {

        width: 100%;

        height: 100%;

        @include flex-center;

        z-index: $category-popup-z-index;

    }

    .loading-wrapper {

        width: 50%;

        height: 20%;

        border-radius: 10%;

        background-color: gray;

        opacity: 0.4;

    }

    .mine-loading {

      color: #fff;

      font-size: 14px;

    }

    .content {

        padding: 10px;

    }

    .pic {

        margin-bottom: 12px;

        &-link {

            width: 100%;

        }

        &-img {

            width: 100%;

        }

    }

    .section {

        margin-bottom: 12px;

        &:last-child {

            margin-bottom: 0px;

        }

        &-title {

            height: 28px;

            line-height: 28px;

            color: #080808;

            font-weight: bold;

        }

        &-list {

            display: flex;

            flex-wrap: wrap;

            background-color: #fff;

            padding: 10px 10px 0;

        }

        &-item {

            width: (100% / 3);

        }

        &-link {

            width: 100%;

        }

        &-pic {

            width: 100%;

        }

    }

</style>