小程序自定义TabBar后如何实现keep-alive | 小程序不支持vue路由的keep-alive

keep-alive--uniapp

uniapp的keep-alive只支持H5，所以，我们应该实现页面缓存呢

实现思路
1.在tab每个选项增加两个值：v-if和v-show，if控制组件是否需要渲染，show控制组件display

2.初始化时候设置首页的if``true，其它都为false；show根据页面索引动态显示

3.当我们切换时:把上一个tab页面的show改为false,然后把当前要切换页面的tab数据中的v-if和v-show都变为true
注意：每个页面的v-if只改变一次，只有初次加载页面的时候，从false设置为true后就不会改变

示例

<!-- 只做示范，不能直接复制运行 -->
<template>
<view>
    <mhome v-if="tar[0]" v-show="index=='0'" ></mhome>
    <punchcard v-if="tar[1]" v-show="index=='1'"></punchcard>
    <navigation v-if="tar[2]" v-show="index=='2'"></navigation>
    <mycenter v-if="tar[3]" v-show="index=='3'"></mycenter>
    <u-tabbar :value="index" @change="change">
        <u-tabbar-item name="0" text="首页" icon="home"></u-tabbar-item>
        <u-tabbar-item name="1" text="打卡" icon="map"></u-tabbar-item>
        <u-tabbar-item name="2" text="导航" icon="hourglass"></u-tabbar-item>
        <u-tabbar-item name="3" text="我的" icon="account"></u-tabbar-item>
    </u-tabbar>
</view>
</template>

<script>
import ...  // 略 
export default {
    data() {
        return {
            index: "0",
            tar:[true,false,false,false]
        }
    },
    components: {
        mhome,
        mycenter,
        punchcard,
        navigation,
    },
    methods: {
        change(e) {
            // 这里e是页面索引，返回来的是字符串类型的
            this.index = e;
            this.tar[parseInt(e)]=true;
        }
    }
}
</script>

效果展示