uniapp 小程序自定义tabbar及初次加载闪屏解决方案

很惭愧，这竟然是老衲在csdn的首次内容输出，还请看官，高抬贵手，多喷两句， 反正我也不听~👀

首先声明，我是最近才刚开始写uniapp……

言归正传，最近给公司要做一个小程序，由于之前并没有实际从0开始构建开发经验，故记录下遇到的一些小难点，方便之后查阅，希望也能帮到其他小朋友，目标项目主界面如下图所示

如果想实现这个效果的tabbar，那我们就只能舍弃小程序本身自带的了，在网上疯狂找了一圈，没有找到相对比较满意的解决办法，尝试后基本卡在首次加载切换时，每个页面都要初始化闪烁一下，不是很美丽，程序猿的强迫症怎么能允许！！最后结合查阅的资料结合自己的一些理解，算是比较完美的解决。

思路大概是这样

• 首先封装一个自己用的tabbar组件

• 然后配置page.js

• 全局引用自定义tabbar

• 每个tabbar页面引用组件

• 最后进入主题：解决初次加载闪屏

话不多说，直接上代码……

{  "pages": [{    "path": "pages/index/index",    "style": {      "navigationBarTitleText": "简介"    }  }, {    "path": "pages/discount/discount",    "style": {      "navigationBarTitleText": "优惠"    }   }, {    "path": "pages/code/code",    "style": {      "navigationBarTitleText": "二维码"    }   }, {    "path": "pages/search/search",    "style": {      "navigationBarTitleText": "探索"    }   }, {    "path": "pages/mine/mine",    "style": {      "navigationBarTitleText": "我的"    }   }],  "globalStyle": {    "navigationBarTextStyle": "black",    "navigationBarTitleText": "CRM",    "navigationBarBackgroundColor": "#F8F8F8",    "backgroundColor": "#F8F8F8",    "app-plus": {      "background": "#efeff4"    }  },  "tabBar": {    "color": "#999999",    "selectedColor": "#f00",    "borderStyle": "black",    "backgroundColor": "#ffffff",    "midButton":{      "text":"二维码",      "pagePath":"pages/code/code",      "iconPath":"static/code.png",      "selectedIconPath":"static/codeSelected.png"    },    "list":[      {        "pagePath":"pages/index/index",        "iconPath":"static/home.png",        "selectedIconPath":"static/homeSelected.png",        "text":"简介"      },      {        "pagePath":"pages/discount/discount",        "iconPath":"static/gift.png",        "selectedIconPath":"static/giftSelected.png",        "text":"优惠"      },      {        "pagePath":"pages/code/code",        "iconPath":"static/code.png",        "selectedIconPath":"static/codeSelected.png",        "text":"二维码"      },      {        "pagePath":"pages/search/search",        "iconPath":"static/search.png",        "selectedIconPath":"static/searchSelected.png",        "text":"探索"      },      {        "pagePath":"pages/mine/mine",        "iconPath":"static/mine.png",        "selectedIconPath":"static/mineSelected.png",        "text":"我的"      }    ]  }}

import Vue from 'vue'import App from './App'import diyTabbar from "components/zdy-tabbar.vue" // 注册全局组件Vue.component('diy-tabbar', diyTabbar) Vue.config.productionTip = false App.mpType = 'app' const app = new Vue({  ...App})app.$mount()

  // current-page 对应的就是tabbar的index

至此，我们完成了第一步这个伟大的壮举，兴冲冲的启动程序，激动的心，颤抖的手点击第一个tabbar~

咦？是什么在闪烁呀，于是我们疯狂的点击了每一个却发现都在闪，当我们再次点击每个一个tabbar，又都好了...

于是我们心安理得的想，这样就可以了，毕竟整个这个确实没有原生的用着爽，老子已经尽力了....

然后只过了两分钟，我那份强迫症就犯了，这也太丑了，与我前端大神的身份不搭啊

于是只能自己造小三轮车了，思路就是

• 创建一个主页面

• 将所有tabbar组件和页面都引入其中，

• 这样共用一个tabbar就不会出现闪屏的问题

这样就能稍微优雅的坐上三轮车，诶？不对，我在说什么...

1.首先，我们先建一个主页面，将所有tabbar页面引入

其中中间按钮我是做一个底部弹窗所以就不要组件了，大家自行根据情况改动，这里我们不需要再通过switchTab来进行跳转，只用currentIndex来切换组件即可，下面的u-popup，是底部弹窗，效果如下

2.接下来我们来改动，tabbar中的代码

1. 修改page.js

首先我们先将主页面放到page.js的第一个，作为入口文件

补充：到这一步，page.js中的tabbar整个就可以删除了

大功告成，目前这种方式，我还没有遇到什么问题和坑，希望评论区大神可以指点一二，初次分享，不吝赐教，谢谢大家，如果大家喜欢，多点赞评论，这也是我继续创作的强劲动力~

来源地址：https://blog.csdn.net/weixin_42301688/article/details/129428903