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

最新推荐文章于 2024-12-17 13:39:38 发布

原创最新推荐文章于 2024-12-17 13:39:38 发布 · 2k 阅读

3 ·

CC 4.0 BY-SA版权

uni-app 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一种在顶部TabBar中实现点击加载缓存效果的方法。通过使用数组存储已加载页面的索引，并结合v-if和v-show指令，实现了点击加载缓存效果，避免了重复加载已访问页面。

顶部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>