uniapp 开发小程序的时候使用自定义 tabbar 时出现切换页面闪烁的情况

是阿臻2024-01-13 18:30

问题：在使用自定义组件的时候可以看到页面切换明显的闪烁, 这种体验是很不好的, 当然最好的方式就是使用原生导航栏, 不要搞花里胡哨的东西。

来看下体验不好的效果

优化调整

先说思路，就是仍然设置原生 tabbar, 在应用启动的时候主动隐藏原生 tabbar, 然后使用自定义组件来进行位置占位。

在 page.json 里面设置对应的tabbar字段,

json 复制代码

  "tabBar": {
    "color": "#727477",
    "selectedColor": "#196FFF",
    "borderStyle": "black",
    "backgroundColor": "#FFFFFF",
    "height": "105rpx",
    "fontSize": "20rpx",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页"
      },
      {
        "pagePath": "pages/explore/explore",
        "text": "发现"
      },
      {
        "pagePath": "pages/training/training",
        "text": "练习"
      },
      {
        "text": "我的",
        "pagePath": "pages/my/my"
      }
    ]
  },

然后在 app.vue 文件里 launch 生命周期的时候隐藏原生的tabbar

ts 复制代码

onLaunch (() => {
  uni.hideTabBar()
})

最后在每个 tab 页面添加你自定义的 tabbar 组件, 自定义 tabbar 组件里面要使用 uni.switchTab 进行切换页面。

总结：本质上只不过是在原生 tabbar 页面添加了自定义 tabbar 组件, 我们只是把原生的隐藏了,然后用自定义组件进行了占位

可以看到优化后的效果, 在首次切换到我的页面的时候仍会有闪烁, 但是首次加载过后再次切换到页面就不再会有闪烁的问题了。