很惭愧,这竟然是老衲在csdn的首次内容输出,还请看官,高抬贵手,多喷两句, 反正我也不听~?
首先声明,我是最近才刚开始写uniapp……
言归正传,最近给公司要做一个小程序,由于之前并没有实际从0开始构建开发经验,故记录下遇到的一些小难点,方便之后查阅,希望也能帮到其他小朋友,目标项目主界面如下图所示
![](http://zhangshiyu.com/zb_users/upload/2023/05/20230504081702168315942235622.png)
如果想实现这个效果的tabbar,那我们就只能舍弃小程序本身自带的了,在网上疯狂找了一圈,没有找到相对比较满意的解决办法,尝试后基本卡在首次加载切换时,每个页面都要初始化闪烁一下,不是很美丽,程序猿的强迫症怎么能允许!!最后结合查阅的资料结合自己的一些理解,算是比较完美的解决。
思路大概是这样
首先封装一个自己用的tabbar组件
然后配置page.js
全局引用自定义tabbar
每个tabbar页面引用组件
最后进入主题:解决初次加载闪屏
话不多说,直接上代码……
首先我们先封装一个自定义的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,是底部弹窗,效果如下
![](http://zhangshiyu.com/zb_users/upload/2023/05/20230504081702168315942264625.png)
2.接下来我们来改动,tabbar中的代码
![](http://zhangshiyu.com/zb_users/upload/2023/05/20230504081702168315942260192.png)
修改page.js
首先我们先将主页面放到page.js的第一个,作为入口文件
![](http://zhangshiyu.com/zb_users/upload/2023/05/20230504081702168315942231543.png)
补充:到这一步,page.js中的tabbar整个就可以删除了
大功告成,目前这种方式,我还没有遇到什么问题和坑,希望评论区大神可以指点一二,初次分享,不吝赐教,谢谢大家,如果大家喜欢,多点赞评论,这也是我继续创作的强劲动力~