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

本文介绍了一种在顶部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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值