uniapp小程序自定义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就不会出现闪屏的问题

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

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

.main_box{
    height: calc(100vh - 110rpx);
    overflow: scroll;
}
.foot_box{
    height: 110rpx;
}
.content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* #ifdef H5 */
    height: calc(100vh - var(--window-bottom) - var(--window-top));
    /* #endif */
    /* #ifndef H5 */
    height: 100vh;
    /* #endif */
    transition: opacity 0.3s;
    background: #999;
    opacity: 0;
    &.active {
        opacity: 1;
    }
    .logo {
        position: relative;
        margin-top: -400upx;
        width: 200upx;
        height: 200upx;
        // z-index: -1;
        opacity: 0;
        transition: opacity 0.3s;
        &.active {
            opacity: 1;
        }
    }
}
.tabbar-box-wrap {
    width: 100%;
    padding: 50upx;
    box-sizing: border-box;
    .tabbar-box {
        display: flex;
        width: 100%;
        background: #fff;
        border-radius: 20upx;
        padding: 15upx 20upx;
        box-sizing: border-box;
        z-index: 2;
        .tabbar-box-item {
            // position: relative;
            width: 100%;
            z-index: 3;
            margin: 10upx;
            color: $uni-color-subtitle;
            text-align: center;
            font-size: $uni-font-size-base;
            .box-image {
                width: 100%;
                height: $uni-img-size-lg;
            }
        }
    }
}
/deep/ .u-popup__content{
    border-radius: 30rpx 30rpx 0 0;
}

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

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

修改page.js

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

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