UNIAPP----两种方法解决自定义tabbar,切换无卡顿白屏

说一下思路,代码后续贴

一:app,h5,小程序都可以

1,在pages.json里的tabbar,只留下pagePath,属性只留height:“0px”,意思为留下uni.switchtab跳转路径,不会闪屏白屏。但是高度为0px,看不到,也没给图标和文字。

2,使用uview 的自定义tabbar。笨方法:每个tabbar页面中都放置一次。点击不同tabbar,跳转不同tabbar——uni.switchtab。好方法:稍微封装个组件。各tabbar引入一次。

缺点:代码较多,不封装维护较乱。如果进入tabbar有全屏loading遮盖层,底部tabbar不会显示,会和页面一起显示,所以有几率白屏。

3,在APP.vue里面onLaunch,加入uni.hideTabBar(), 并且每个tabbar页面的onload都要加入uni.hideTabBar()

总结:把原生tabbar高度设置0px,跳转用uni.switchtab,自定义的tabbar放在每个tabbar页面下,同时记得隐藏原生tabbar。

二:app,h5,小程序都可以 (公司大佬的解决方法)

1只有一个主页面,之前的tabbar都是子页面。

相当于首页只有一个大页面。其他4个tabbar均为组件,唯一不变的是底部的tabbar。

tabbar固定不变,变化的是上方的页面。

template标签包裹子组件,通过v-if控制。子组件用v-show控制就行。

底部tabbar一直在,无论是否有数据,点击不同tabbar,主动修改不同标题和颜色。

给张图:

 暂未发现缺点,并且下拉刷新可以用。

在父大页面写下拉,去调用$refs子组件内的刷新或者请求即可。

代码后续补...

  • 3
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 18
    评论
自定义 TabBar 切换页面闪烁是因为页面重新渲染导致的,解决办法有很多种,这里介绍一种比较简单的做法。 1. 在 App.vue 中创建一个全局变量,用于记录当前选中的 Tab: ```javascript export default { globalData: { currentTab: 0, }, } ``` 2. 在 TabBar 组件中,绑定当前选中的 Tab: ```html <!-- TabBar.vue --> <template> <view class="tab-bar"> <view class="tab-item" :class="{ active: currentTab === 0 }" @click="switchTab(0)"></view> <view class="tab-item" :class="{ active: currentTab === 1 }" @click="switchTab(1)"></view> <view class="tab-item" :class="{ active: currentTab === 2 }" @click="switchTab(2)"></view> </view> </template> <script> export default { props: { // 从父组件传入当前选中的 Tab currentTab: { type: Number, default: 0, }, }, methods: { // 切换 Tab switchTab(index) { this.$emit('switchTab', index); }, }, }; </script> ``` 3. 在 TabBar 所在的页面中,监听 Tab 切换事件,并手动切换页面: ```html <template> <view> <view v-if="currentTab === 0">Tab 1</view> <view v-if="currentTab === 1">Tab 2</view> <view v-if="currentTab === 2">Tab 3</view> <TabBar :currentTab="currentTab" @switchTab="onSwitchTab" /> </view> </template> <script> export default { data() { return { currentTab: 0, }; }, methods: { // 监听 Tab 切换事件 onSwitchTab(index) { // 如果切换到当前页面,则不进行操作 if (index === this.currentTab) { return; } // 记录当前选中的 Tab this.currentTab = index; // 手动切换页面 uni.switchTab({ url: `/pages/tab${index + 1}/index`, }); }, }, }; </script> ``` 这样,在 Tab 切换时,页面不会重新渲染,也就不会出现闪烁的问题。需要注意的是,手动切换页面时,需要使用 `uni.switchTab` 方法,而不是 `uni.navigateTo` 或 `uni.redirectTo` 方法
评论 18
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值