uniapp 自定义tabbar页面不刷新

最近在做自定义tabbar时,每次切换页面都要刷新,页面渲染很慢,需要实现切换页面不刷新问题。

结局思路,原生的tabbar切换页面时就不选新,用switchTab来跳转

1.pages.json中配置tabbar,如下,设置高度为0,界面只需要设置路径

"tabBar":{
		"list": [
			{
				"pagePath":"pages/home/index"
			},{
				"pagePath":"pages/category/index"
			},{
				"pagePath":"pages/AI/index"
			},{
				"pagePath":"pages/collect/index"
			},{
				"pagePath":"pages/my/index"
			}
		],
		"height":"0px"
	},

2. app.vue中隐藏原生tabbar

onLaunch: function() {
			uni.hideTabBar()
			console.log('App Launch')
		},

3.在自定义tab页面中用switchTab跳转

navigateToMoveCar(url,title) {
      console.log(url)
      uni.switchTab({url: url});
    },

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Uniapp中,当切换tabbar页面时,可能会出现页面刷新的问题。有几种解决方法可以尝试。 一种方法是在pages.json文件中设置原生tabbar,并在页面运行时隐藏原生tabbar,以解决闪烁问题。这可以通过在页面的onLoad或onShow生命周期函数中使用uni.hideTabBar()来实现。这样,当页面加载或显示时,原生tabbar将被隐藏,避免了页面刷新时的闪烁问题。\[1\] 另一种方法是将自定义tabbar的跳转方式改为uni.switchTab(),而不是使用navigator等其他跳转方式。使用uni.switchTab()可以确保底部tabbar页面切换时不会跟着刷新而闪烁。例如,可以使用uni.switchTab({ url: path })来实现tabbar的跳转。\[2\] 如果遇到无法使用原生tabbar实现的需求,可以考虑自行封装tabbar组件。在封装tabbar组件时,需要确保tabbar选项在页面切换时正确激活,并且有激活和非激活状态的样式。这样可以在页面切换时保持tabbar的正确状态,避免刷新问题。\[3\] 综上所述,可以通过设置原生tabbar并隐藏、使用uni.switchTab()跳转或自行封装tabbar组件来解决Uniapp刷新tabbar页面的问题。 #### 引用[.reference_title] - *1* *3* [uniapp自定义tabbar](https://blog.csdn.net/weixin_45855502/article/details/129309134)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [uniapp 小程序使用自定义tabbar页面刷新闪烁问题](https://blog.csdn.net/gyl_sunshine/article/details/123233326)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值