uniapp小程序自定義tabbar以及初次加載閃屏解決方法
更新時(shí)間：2023年05月05日 10:36:23 作者：會(huì)開(kāi)車的叨叨
Uniapp小程序可以通過(guò)自定義tabbar來(lái)實(shí)現(xiàn)更加個(gè)性化的界面設(shè)計(jì),下面這篇文章主要給大家介紹了關(guān)于uniapp小程序自定義tabbar以及初次加載閃屏解決方法,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
很慚愧，這竟然是老衲在csdn的首次內(nèi)容輸出，還請(qǐng)看官，高抬貴手，多噴兩句， 反正我也不聽(tīng)~??
首先聲明，我是最近才剛開(kāi)始寫(xiě)uniapp……
言歸正傳，最近給公司要做一個(gè)小程序，由于之前并沒(méi)有實(shí)際從0開(kāi)始構(gòu)建開(kāi)發(fā)經(jīng)驗(yàn)，故記錄下遇到的一些小難點(diǎn)，方便之后查閱，希望也能幫到其他小朋友，目標(biāo)項(xiàng)目主界面如下圖所示
如果想實(shí)現(xiàn)這個(gè)效果的tabbar，那我們就只能舍棄小程序本身自帶的了，在網(wǎng)上瘋狂找了一圈，沒(méi)有找到相對(duì)比較滿意的解決辦法，嘗試后基本卡在首次加載切換時(shí)，每個(gè)頁(yè)面都要初始化閃爍一下，不是很美麗，程序猿的強(qiáng)迫癥怎么能允許??！最后結(jié)合查閱的資料結(jié)合自己的一些理解，算是比較完美的解決。
思路大概是這樣
- 首先封裝一個(gè)自己用的tabbar組件
- 然后配置page.js
- 全局引用自定義tabbar
- 每個(gè)tabbar頁(yè)面引用組件
- 最后進(jìn)入主題：解決初次加載閃屏
話不多說(shuō)，直接上代碼……
1.首先我們先封裝一個(gè)自定義的tabbar組件(配置信息自行根據(jù)業(yè)務(wù)更改)
<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: '簡(jiǎn)介',
centerItem: false
},
{
id: 1,
path: '/pages/discount/discount',
icon: '/static/gift.png',
selectIcon: '/static/giftSelected.png',
text: '優(yōu)惠',
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": "簡(jiǎn)介"
}
}, {
"path": "pages/discount/discount",
"style": {
"navigationBarTitleText": "優(yōu)惠"
}
}, {
"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":"簡(jiǎn)介"
},
{
"pagePath":"pages/discount/discount",
"iconPath":"static/gift.png",
"selectedIconPath":"static/giftSelected.png",
"text":"優(yōu)惠"
},
{
"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.注冊(cè)全局組件tabbar在main.js文件中，配置如下：
import Vue from 'vue'
import App from './App'
import diyTabbar from "components/zdy-tabbar.vue"
// 注冊(cè)全局組件
Vue.component('diy-tabbar', diyTabbar)
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()4.所有的tabbar頁(yè)面引入自定義tabbar：
<diy-tabbar :current-page="0"></diy-tabbar> // current-page 對(duì)應(yīng)的就是tabbar的index
至此，我們完成了第一步這個(gè)偉大的壯舉，興沖沖的啟動(dòng)程序，激動(dòng)的心，顫抖的手點(diǎn)擊第一個(gè)tabbar~
咦？是什么在閃爍呀，于是我們瘋狂的點(diǎn)擊了每一個(gè)卻發(fā)現(xiàn)都在閃，當(dāng)我們?cè)俅吸c(diǎn)擊每個(gè)一個(gè)tabbar，又都好了...
于是我們心安理得的想，這樣就可以了，畢竟整個(gè)這個(gè)確實(shí)沒(méi)有原生的用著爽，老子已經(jīng)盡力了....
然后只過(guò)了兩分鐘，我那份強(qiáng)迫癥就犯了，這也太丑了，與我前端大神的身份不搭啊
對(duì)于初次加載閃屏問(wèn)題的資料網(wǎng)上一大堆假的，這個(gè)有這么難嗎？為啥連個(gè)像樣的資料都找不到，...
于是只能自己造小三輪車了，思路就是
- 創(chuàng)建一個(gè)主頁(yè)面
- 將所有tabbar組件和頁(yè)面都引入其中，
- 這樣共用一個(gè)tabbar就不會(huì)出現(xiàn)閃屏的問(wèn)題
這樣就能稍微優(yōu)雅的坐上三輪車，誒？不對(duì)，我在說(shuō)什么...
1.首先，我們先建一個(gè)主頁(yè)面，將所有tabbar頁(yè)面引入
<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">發(fā)文章</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">發(fā)圖文</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">發(fā)視頻</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>其中中間按鈕我是做一個(gè)底部彈窗所以就不要組件了，大家自行根據(jù)情況改動(dòng)，這里我們不需要再通過(guò)switchTab來(lái)進(jìn)行跳轉(zhuǎn)，只用currentIndex來(lái)切換組件即可，下面的u-popup，是底部彈窗，效果如下
2.接下來(lái)我們來(lái)改動(dòng)，tabbar中的代碼
修改page.js
首先我們先將主頁(yè)面放到page.js的第一個(gè)，作為入口文件
補(bǔ)充：到這一步，page.js中的tabbar整個(gè)就可以刪除了
大功告成，目前這種方式，我還沒(méi)有遇到什么問(wèn)題和坑
總結(jié)
到此這篇關(guān)于uniapp小程序自定義tabbar以及初次加載閃屏解決方法的文章就介紹到這了,更多相關(guān)uniapp小程序自定義tabbar內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- uniapp小程序底部tabbar圖標(biāo)大小設(shè)置辦法
- uniapp原生tabbar設(shè)置并添加數(shù)字角標(biāo)或小紅點(diǎn)提示功能
- uniapp自定義tabbar的方法(支持中間凸起、角標(biāo)、動(dòng)態(tài)隱藏tab和全端適用)
- 小程序自定義tabbar導(dǎo)航欄及動(dòng)態(tài)控制tabbar功能實(shí)現(xiàn)方法(uniapp)
- uniapp小程序配置tabbar底部導(dǎo)航欄實(shí)戰(zhàn)指南
- uniapp微信小程序底部動(dòng)態(tài)tabBar的解決方案(自定義tabBar導(dǎo)航)
- uniapp如何使用uv-popup彈出框隱藏底部導(dǎo)航tabbar
相關(guān)文章
javascript 跨瀏覽器開(kāi)發(fā)經(jīng)驗(yàn)總結(jié)（五） js 事件
javascript 跨瀏覽器開(kāi)發(fā)之js 事件的兼容性問(wèn)題，需要的朋友可以參考下。2010-05-05
JS實(shí)現(xiàn)table表格數(shù)據(jù)排序功能(可支持動(dòng)態(tài)數(shù)據(jù)+分頁(yè)效果)
這篇文章主要介紹了JS實(shí)現(xiàn)table表格數(shù)據(jù)排序功能(可支持動(dòng)態(tài)數(shù)據(jù)+分頁(yè)效果) 的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友一起看看吧2016-05-05
基于BootstrapValidator的Form表單驗(yàn)證(24)
這篇文章主要為大家詳細(xì)介紹了基于BootstrapValidator的Form表驗(yàn)證,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
解決JavaScript中0.1+0.2不等于0.3問(wèn)題
這篇文章主要介紹了解決JavaScript中0.1+0.2不等于0.3問(wèn)題,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了JS使用JSON作為參數(shù),結(jié)合實(shí)例形式分析了ajax傳遞json數(shù)據(jù)及數(shù)據(jù)處理的相關(guān)技巧,需要的朋友可以參考下2016-06-06
下面小編就為大家?guī)?lái)一篇原生JS獲取元素的位置與尺寸實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
這篇文章主要為大家詳細(xì)介紹了JavaScript中常用的幾個(gè)DOM事件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-04-04
JS實(shí)現(xiàn)簡(jiǎn)單路由器功能的方法
這篇文章主要介紹了JS實(shí)現(xiàn)簡(jiǎn)單路由器功能的方法,基于javascript模擬簡(jiǎn)單路由編碼的相關(guān)技巧,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了關(guān)于js內(nèi)存泄露的一個(gè)好例子。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
最近幾天閑來(lái)無(wú)事，隨便寫(xiě)了點(diǎn)代碼玩了玩。個(gè)人覺(jué)得，應(yīng)該把編碼當(dāng)做一種樂(lè)趣，要不然會(huì)覺(jué)得很累...2011-01-01