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

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

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

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

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

思路大概是这样

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

• 然后配置page.js

• 全局引用自定义tabbar

• 每个tabbar页面引用组件

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

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

1. 首先我们先封装一个自定义的tabbar组件(配置信息自行根据业务更改)

2.然后我们配置下page.js

{
  "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":"我的"
      }
    ]
  }
}

3.注册全局组件tabbar在main.js文件中，配置如下：

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()

4.所有的tabbar页面引入自定义tabbar：

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

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

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

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

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

对于初次加载闪屏问题的资料网上一大堆假的，这个有这么难吗？为啥连个像样的资料都找不到，...

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

• 创建一个主页面

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

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

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

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

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

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

1. 修改page.js

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

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

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