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

更新时间：2023年05月05日 10:36:23 作者：会开车的叨叨

Uniapp小程序可以通过自定义tabbar来实现更加个性化的界面设计,下面这篇文章主要给大家介绍了关于uniapp小程序自定义tabbar以及初次加载闪屏解决方法,文中通过图文介绍的非常详细,需要的朋友可以参考下

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

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

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

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

思路大概是这样

首先封装一个自己用的tabbar组件
然后配置page.js
全局引用自定义tabbar
每个tabbar页面引用组件
最后进入主题：解决初次加载闪屏

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

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

<template>
  <view class="tabbar-container">
    <block>
      <view class="tabbar-item" v-for="(item, index) in tabbarList" :class="[item.centerItem ? ' center-item' : '']" @click="changeItem(item)">
        <view class="item-top"><image :src="currentItem == item.id ? item.selectIcon : item.icon"></image></view>
        <view class="item-bottom" :class="[currentItem == item.id ? 'item-active' : '']">
          <text>{{ item.text }}</text>
        </view>
      </view>
    </block>
  </view>
</template>
<script>
export default {
  props: {
    currentPage: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      currentItem: 0,
      tabbarList: [
        {
          id: 0,
          path: '/pages/index/index',
          icon: '/static/home.png',
          selectIcon: '/static/homeSelected.png',
          text: '简介',
          centerItem: false
        },
        {
          id: 1,
          path: '/pages/discount/discount',
          icon: '/static/gift.png',
          selectIcon: '/static/giftSelected.png',
          text: '优惠',
          centerItem: false
        },
        {
          id: 2,
          path: '/pages/code/code',
          icon: '/static/code.png',
          selectIcon: '/static/codeSelected.png',
          text: '二维码',
          centerItem: true
        },
        {
          id: 3,
          path: '/pages/search/search',
          icon: '/static/search.png',
          selectIcon: '/static/searchSelected.png',
          text: '探索',
          centerItem: false
        },
        {
          id: 4,
          path: '/pages/mine/mine',
          icon: '/static/mine.png',
          selectIcon: '/static/mineSelected.png',
          text: '我的',
          centerItem: false
        }
      ]
    };
  },
  mounted() {
    this.currentItem = this.currentPage;
    uni.hideTabBar();
  },
  methods: {
    changeItem(item) {
      let _this = this;
      //_this.currentItem = item.id;
      uni.switchTab({
        url: item.path
      });
    }
  }
};
</script>
<style>
view {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.tabbar-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 110rpx;
  box-shadow: 0 0 5px #999;
  display: flex;
  align-items: center;
  padding: 5rpx 0;
  color: #999999;
}
.tabbar-container .tabbar-item {
  width: 20%;
  height: 100rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.tabbar-container .item-active {
  color: #f00;
}
.tabbar-container .center-item {
  display: block;
  position: relative;
}
.tabbar-container .tabbar-item .item-top {
  width: 70rpx;
  height: 70rpx;
  padding: 10rpx;
}
.tabbar-container .center-item .item-top {
  flex-shrink: 0;
  width: 100rpx;
  height: 100rpx;
  position: absolute;
  top: -50rpx;
  left: calc(50% - 50rpx);
  border-radius: 50%;
  box-shadow: 0 0 5px #999;
  background-color: #ffffff;
}
.tabbar-container .tabbar-item .item-top image {
  width: 100%;
  height: 100%;
}
.tabbar-container .tabbar-item .item-bottom {
  font-size: 28rpx;
  width: 100%;
}
.tabbar-container .center-item .item-bottom {
  position: absolute;
  bottom: 5rpx;
}
</style>

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：

<diy-tabbar :current-page="0"></diy-tabbar> // current-page 对应的就是tabbar的index

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

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

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

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

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

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

创建一个主页面
将所有tabbar组件和页面都引入其中，
这样共用一个tabbar就不会出现闪屏的问题

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

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

<template>
    <view>
        <view class="main_box">
            <index v-if="currentIndex === 0"></index>
            <message v-if="currentIndex === 1"></message>
            <!-- <midBtn v-if="currentIndex === 2"></midBtn> -->
            <member v-if="currentIndex === 3"></member>
            <my v-if="currentIndex === 4"></my>
        </view>
        <view class="foot_box">
            <diy-tabbar :current-page="currentIndex" @changeItem="changeItem"></diy-tabbar>
        </view>
        <u-popup class="firstPagePopup" :show="active" :closeable="true" @close="close" @open="open">
            <view>
                <view class="tabbar-box-wrap">
                    <view class="tabbar-box">
                        <view class="tabbar-box-item" @click="goToPage('/pages/tabbar-3-detial/tabbar-3-release/tabbar-3-release')">
                            <image class="box-image" src="@/static/img/mid_btn1.png" mode="aspectFit"></image>
                            <text class="explain">发文章</text>
                        </view>
                        <view class="tabbar-box-item" @click="goToPage('/pages/tabbar-3-detial/tabbar-3-video/tabbar-3-video')">
                            <image class="box-image" src="@/static/img/mid_btn2.png" mode="aspectFit"></image>
                            <text class="explain">发图文</text>
                        </view>
                        <view class="tabbar-box-item" @click="goToPage('/pages/tabbar-3-detial/tabbar-3-qa/tabbar-3-qa')">
                            <image class="box-image" src="@/static/img/mid_btn3.png" mode="aspectFit"></image>
                            <text class="explain">发视频</text>
                        </view>
                    </view>
                </view>
            </view>
        </u-popup>
    </view>
</template>
<script>
    import index  from '@/pages/index/index.vue'
    import my  from '@/pages/my/index.vue'
    import message  from '@/pages/message/index.vue'
    import member from '@/pages/memberCenter/index.vue'
    export default {
        components:{
            index,
            my,
            message,
            member
        },
        data() {
            return {
                active:false,
                currentIndex:4
            }
        },
        onLoad() {
        },
        methods: {
            // 如果
            changeItem(item){
                if(item.id === 2){
                    this.active = true
                }else{
                    this.currentIndex = item.id
                }
                // uni.switchTab({
                //   url: item.path
                // });
                // console.log(item)
            },
            close(){
                debugger
                this.active=false
            },
            open(){}
        }
    }
</script>
<style lang="scss" scoped>
.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;
}
</style>

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

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

修改page.js

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

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

大功告成，目前这种方式，我还没有遇到什么问题和坑

总结

到此这篇关于uniapp小程序自定义tabbar以及初次加载闪屏解决方法的文章就介绍到这了,更多相关uniapp小程序自定义tabbar内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

js分片下载超出2G的大文件代码实例
为了实现断点续传,研究了js的文件分片,下面这篇文章主要给大家介绍了关于js分片下载超出2G的大文件的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-04-04
javaScript中的原型解析【推荐】
下面小编就为大家带来一篇javaScript中的原型解析【推荐】。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
JS动态添加选项案例分析
这篇文章主要介绍了JS动态添加选项的方法,结合实例形式分析了javascript针对页面元素动态操作的相关技巧,需要的朋友可以参考下
2016-10-10
微信小程序实现上传图片功能
这篇文章主要为大家详细介绍了微信小程序实现上传图片功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-05-05
用JS写的一个TableView控件代码
JS写的一个TableView控件代码，方便输出表格。
2010-01-01
Javascript:为input设置readOnly属性(示例讲解)
本篇文章主要是对Javascript中为input设置readOnly属性的示例代码进行了介绍。需要的朋友可以过来参考下，希望对大家有所帮助
2013-12-12
JS获取时间的方法
这篇文章主要介绍了JS获取时间的方法,涉及date的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-01-01
Webpack4 使用Babel处理ES6语法的方法示例
这篇文章主要介绍了Webpack4 使用Babel处理ES6语法的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-03-03
TypeScript高级用法的知识点汇总
这篇文章主要给大家介绍了关于TypeScript高级用法的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用TypeScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-12-12
JS实现的仿淘宝交易倒计时效果
这篇文章主要介绍了JS实现的仿淘宝交易倒计时效果,涉及JavaScript针对时间与日期的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-11-11

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具