移动端 vue + mintUI 实现头部页签切换，按需加载~

记录~记录~~有时候，我们会遇到一个页面有两个页签切换需求，但是为了避免同时加载两个页面，我们要做到的就是当前进入的是那个页面，就先加载哪一个页面，并且也不会造成浏览器地址的变化。一开始我使用的方法是在当前页面再加个 <router-view/> 实现二级路由，功能也是可以实现的，但是当我不停的切换的时候，浏览器地址也会不断的改变，所以但我点击浏览器返回键的时候，就会出现一个不停的返回上一个页面，导致这两个页签不停切换，到最后才能回到首页。所以为了避免如此差的体验，最后结合mintUI实现理想的效果，废话不多说，具体实现如下：

<template>

    <div class="votepage">

        <div class="tab">

            <mt-navbar v-model="selected">

                <mt-tab-item id="1" @click.native="selectChange('VoteList')">投一票</mt-tab-item>

                <mt-tab-item id="2" @click.native="selectChange('VoteResult')">看结果</mt-tab-item>

            </mt-navbar>

       </div>

        <mt-tab-container v-model="selected">

            <mt-tab-container-item :id="selected">

                    <component :is='currentView' keep-alive></component>

            </mt-tab-container-item>

        </mt-tab-container>

    </div>

</template>

<script>

import VoteList from '@/components/VoteList.vue'

import VoteResult from '@/components/VoteResult.vue'

export default {

    name: 'votepage',

    data(){

          return{

              selected:"1",

              currentView:"VoteList",

          }

    },

    mounted(){

    },

    methods:{

        selectChange(view){

            this.currentView = view

        }

    },

    components:{

        VoteList,

        VoteResult

    }

}

</script>

告诉自己，每天进步一点点并持之以恒~

巴特西

移动端 vue + mintUI 实现头部页签切换，按需加载~

最新文章

热门文章