小程序自定義tabbar導(dǎo)航欄及動(dòng)態(tài)控制tabbar功能實(shí)現(xiàn)方法(uniapp)
uniapp開發(fā)小程序，不同角色/已登錄未登錄，都有不一樣的底部導(dǎo)航欄，這些情況下就需要自行定義tabbar，從而實(shí)現(xiàn)動(dòng)態(tài)tabbar的實(shí)現(xiàn)。
1.首先我們需要在pages.json配置tabbar
我這里并沒有開啟custom(自定義)，不開啟的話，他在頁面是有占位的，那就需要在頁面進(jìn)行隱藏,后面會(huì)講到;
這里是直接給一個(gè)路徑就可以，用于后期使用uni.switchTab(OBJECT)進(jìn)行跳轉(zhuǎn)
"tabBar": {
// "custom": true,
"list": [{
"pagePath": "pages/home/index"
},
{
"pagePath": "pages/personal/index"
},
{
"pagePath": "pages/personal/notMemberIndex"
}
]
}
2.我們需要配置tabbar列表，根據(jù)角色的不同設(shè)置不同的tabbar列表數(shù)據(jù)
我是登錄的用戶跟未登錄的用戶是不同的tabbar的一個(gè)顯示;
重點(diǎn): ??！ 這里的text，pagePath，iconPath， selectedIconPath，這四個(gè)命名必須跟pages.json里面tabBar配置的原始命名一致，否則會(huì)出問題??！
// 已登錄
const member = [{
"text": "首頁",
"pagePath": "/pages/home/index",
"iconPath": require("@/static/home.png"),
"selectedIconPath": require("@/static/homeSelect.png")
},
{
"text": "個(gè)人中心",
"pagePath": "/pages/personal/index",
"iconPath": require("@/static/personal.png"),
"selectedIconPath": require("@/static/personalSelect.png")
}
]
// 未登錄
const notMember = [{
"text": "山姆會(huì)員商城",
"pagePath": "/pages/home/index",
"iconPath": require("@/static/home.png"),
"selectedIconPath": require("@/static/homeSelect.png")
},
{
"text": "成為會(huì)員",
"pagePath": "/pages/personal/notMemberIndex",
"iconPath": require("@/static/notMember.png"),
"selectedIconPath": require("@/static/notMemberSelect.png")
}
]
export default {
member,
notMember
}
3.使用vuex對(duì)tabBar列表數(shù)據(jù)進(jìn)行一個(gè)存儲(chǔ)賦值
tabBar.js
對(duì)數(shù)據(jù)進(jìn)行一個(gè)存儲(chǔ)，賦值
import tarBarUserType from '@/utils/tabBar.js';
const tabBar = {
state: {
// 判斷是否已登錄(member/notMember)
isMemberType: '',
// tabbar列表數(shù)據(jù)
tabBarList: []
},
mutations: {
setType(state, isMemberType) {
state.isMemberType = isMemberType;
state.tabBarList = tarBarUserType[isMemberType];
}
}
}
export default tabBar;
getters.js
獲取存儲(chǔ)在vuex的內(nèi)容
const getters = {
tabBarList: state => state.tabBar.tabBarList,
isMemberType: state => state.tabBar.isMemberType,
}
export default getters4.需要自行封裝一個(gè)tabbar組件
附上我自己簡單封裝的一個(gè)組件
<template>
<view class="tab-bar">
<view class="content">
<view class="one-tab" v-for="(item, index) in tabBarList" :key="index" @click="selectTabBar(item.pagePath)">
<view>
<view class="tab-img">
<image v-if="routePath === item.pagePath" class="img" :src="item.selectedIconPath"></image>
<image v-else class="img" :src="item.iconPath"></image>
</view>
</view>
<view class="tit">{{ item.text }}</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
// 底部導(dǎo)航欄數(shù)據(jù)
tabBarList: {
type: Array,
required: true
},
// 當(dāng)前頁面路徑
routePath: {
type: String,
required: true
}
},
data() {
return {};
},
methods: {
selectTabBar(path) {
this.$emit('onTabBar', path)
}
}
};
</script>
<style lang="scss">
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
padding: 20rpx;
padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
background-color: #fff;
.content {
display: flex;
.one-tab {
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
.tab-img {
width: 50rpx;
height: 50rpx;
.img {
width: 100%;
height: 100%;
}
}
.tit {
font-size: $font-size-base;
transform: scale(0.7);
}
}
}
}
</style>5.在存在tabbar的頁面中都需要引入組件，并傳相關(guān)數(shù)據(jù)
6.在這些頁面需要用到getters.js獲取拿到這些數(shù)據(jù)
在存在tabbar頁面的都需要使用計(jì)算屬性獲取tabbar數(shù)據(jù)??！
import { mapGetters } from 'vuex';
computed: {
// 這里的tabBarList就是數(shù)據(jù)源，直接使用傳值
...mapGetters(['tabBarList'])
},
7.判斷是否登錄
我這里是有個(gè)登錄頁面的，在登錄頁面的時(shí)候進(jìn)行一個(gè)分配tabbar列表配置的一個(gè)操作（具體看個(gè)人業(yè)務(wù)邏輯）
// 存儲(chǔ)用戶信息
setUserWxInfo(userInfo);
// 調(diào)用上文vuex，member就是已登錄的標(biāo)識(shí)
that.$store.commit('setType', 'member');
8.隱藏tabBar
上文提到我是在pages.json中配置tabBar的時(shí)候是沒有開啟custom自定義模式的，所以說他在頁面是有占位的
在APP.vue, 以及所用到tabbar的頁面，在onShow中調(diào)用 uni.hideTabBar({}); 對(duì)原始tabbar進(jìn)行一個(gè)隱藏
9.在APP.vue中 對(duì)用戶狀態(tài)進(jìn)行判斷
在APP.vue中onShow里進(jìn)行用戶判斷，如果已登錄就傳入member，否則傳入notMember
onShow() {
uni.hideTabBar({});
if (getUserWxInfo('user_info')) {
this.$store.commit('setType', 'member');
} else {
this.$store.commit('setType', 'notMember');
}
}
完結(jié)~
大致就可以完成動(dòng)態(tài)自定義tabbar這項(xiàng)需求了！
總結(jié)
到此這篇關(guān)于小程序自定義tabbar導(dǎo)航欄及動(dòng)態(tài)控制tabbar功能實(shí)現(xiàn)方法(uniapp)的文章就介紹到這了,更多相關(guān)小程序自定義tabbar導(dǎo)航欄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- uniapp小程序底部tabbar圖標(biāo)大小設(shè)置辦法
- uniapp原生tabbar設(shè)置并添加數(shù)字角標(biāo)或小紅點(diǎn)提示功能
- uniapp小程序自定義tabbar以及初次加載閃屏解決方法
- uniapp自定義tabbar的方法(支持中間凸起、角標(biāo)、動(dòng)態(tài)隱藏tab和全端適用)
- uniapp小程序配置tabbar底部導(dǎo)航欄實(shí)戰(zhàn)指南
- uniapp微信小程序底部動(dòng)態(tài)tabBar的解決方案(自定義tabBar導(dǎo)航)
- uniapp如何使用uv-popup彈出框隱藏底部導(dǎo)航tabbar
相關(guān)文章
在現(xiàn)代 Web 開發(fā)中,JavaScript 提供了多種方法來與瀏覽器窗口進(jìn)行交互,包括最大化和最小化瀏覽器窗口,雖然瀏覽器通常會(huì)限制對(duì)窗口尺寸的直接控制,但我們依然可以實(shí)現(xiàn)一些常見的行為,本文將探討如何使用 JavaScript 實(shí)現(xiàn)窗口的最大化和最小化效果2024-12-12
使用JavaScript實(shí)現(xiàn)輪播圖效果完整實(shí)例
我們?cè)诟鞣N網(wǎng)頁中經(jīng)常見到輪播圖的效果,下面這篇文章主要給大家介紹了關(guān)于使用JavaScript實(shí)現(xiàn)輪播圖效果的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
javaScript 中的 call() 是一個(gè)奇妙的方法，但也是一個(gè)讓人迷惑的方法，先看一下官方的解釋。2010-04-04
js+css實(shí)現(xiàn)select的美化效果
這篇文章主要為大家詳細(xì)介紹了js+css實(shí)現(xiàn)select的美化效果，如何針對(duì)select進(jìn)行美化，感興趣的小伙伴們可以參考一下2016-03-03
使用javascript過濾html的字符串(注釋標(biāo)記法)
本篇文章是對(duì)使用javascript過濾html的字符串進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-07-07
javascript實(shí)現(xiàn)全局匹配并替換的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)全局匹配并替換的方法的總結(jié)，十分的簡單實(shí)用，有需要的小伙伴可以參考下。2015-04-04
做項(xiàng)目時(shí)遇到一個(gè)數(shù)據(jù)表需要展示，由于堅(jiān)定著使用合理標(biāo)簽表示合適內(nèi)容，于是使用了table，悲劇開始了。2010-01-01
本篇主要是對(duì)js二維數(shù)組排序的簡單示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-01-01
這篇文章主要為大家介紹了JS拖拽組件的開發(fā)過程，以及如何正確使用JS拖拽組件，做到舉一反三，感興趣的小伙伴們可以參考一下2016-01-01
獲取任意Html元素與body之間的偏移距離 offsetTop、offsetLeft （For:IE5＋ FF1 ）[
獲取任意Html元素與body之間的偏移距離 offsetTop、offsetLeft （For:IE5＋ FF1 ）[...2006-12-12