uni app 多tab子页面v-show缓存

电玩女神 2022-12-26 11:28 97阅读 0赞

顶部tabbar点击，下面item内容切换，最好效果肯定是，点击一个加载一个，加载过的无需重新再次重新加载

*  用v-if ，没有缓存效果
 *  用v-show ，则页面加载的时候，所有的item页面生命周期的初始创建方法全部都执行，违背了点击一个加载一个的初衷(v-show不可见，但是依然会加载执行 )
 *  那就用一个数组tabArr存储点击加载过的页面index，v-if=“tabArr.indexOf(index) > -1” ，这样就能实现点击一个加载缓存一个效果。  
    但是这样也会发生点击过的页面都重叠在一起了，所以还需要多一个条件  
    v-show=“current === index” ，这样已加载过的，只有当前页面才显示，其他隐藏

v-show等同于display: none;

##### 注意：nvue组件如list组件，通过item嵌套页面里面对组件设置 width: 0px;属性起效果，非nvue组件 才可以通过设置display: none;属性进行隐藏 #####

具体代码如下：  
u-tabs 是一个自定义的顶部列表，可自行定义

<template>
    	<view class="warpper">
    		<view class="topFixed">
    			<u-tabs activeColor="#48A8FF" inactiveColor="#000" ref="tabs"
    				:list="tablist" :current="current" @change="change" swiperWidth="750">
    			</u-tabs>
    		</view>
    		<team-item v-for="(teamItem, index) in tablist"
    			:newsitem="teamItem"
    			:key="index" v-if="tabArr.indexOf(index) > -1" v-show="current === index">
    		</team-item>
    	</view>
    </template>
    
    <script>
    import teamItem  from  "./team-item.vue";   
    export default { 
    	components: { 
    		teamItem
    	},
    	data() { 
    		return { 
    			current: 0,
    			tabArr: [0],
    			tablist: [],
    		}
    	},
    	methods: { 
    		change(index) { 
    			this.current = index;
    			if(this.tabArr.indexOf(index) < 0){ 
    				this.tabArr.push(index);
    			}
    		}
    	}
    }
    </script>
    
    <style>
    </style>