小程序自定義tabbar導(dǎo)航欄及動態(tài)控制tabbar功能實現(xiàn)方法(uniapp)
uniapp開發(fā)小程序,不同角色/已登錄未登錄,都有不一樣的底部導(dǎo)航欄,這些情況下就需要自行定義tabbar,從而實現(xiàn)動態(tài)tabbar的實現(xiàn)。
1.首先我們需要在pages.json配置tabbar
我這里并沒有開啟custom(自定義),不開啟的話,他在頁面是有占位的,那就需要在頁面進(jìn)行隱藏,后面會講到;
這里是直接給一個路徑就可以,用于后期使用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的一個顯示;
重點: ?。?這里的text,pagePath,iconPath, selectedIconPath,這四個命名必須跟pages.json里面tabBar配置的原始命名一致,否則會出問題!!
// 已登錄 const member = [{ "text": "首頁", "pagePath": "/pages/home/index", "iconPath": require("@/static/home.png"), "selectedIconPath": require("@/static/homeSelect.png") }, { "text": "個人中心", "pagePath": "/pages/personal/index", "iconPath": require("@/static/personal.png"), "selectedIconPath": require("@/static/personalSelect.png") } ] // 未登錄 const notMember = [{ "text": "山姆會員商城", "pagePath": "/pages/home/index", "iconPath": require("@/static/home.png"), "selectedIconPath": require("@/static/homeSelect.png") }, { "text": "成為會員", "pagePath": "/pages/personal/notMemberIndex", "iconPath": require("@/static/notMember.png"), "selectedIconPath": require("@/static/notMemberSelect.png") } ] export default { member, notMember }
3.使用vuex對tabBar列表數(shù)據(jù)進(jìn)行一個存儲賦值
tabBar.js
對數(shù)據(jù)進(jìn)行一個存儲,賦值
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
獲取存儲在vuex的內(nèi)容
const getters = { tabBarList: state => state.tabBar.tabBarList, isMemberType: state => state.tabBar.isMemberType, } export default getters
4.需要自行封裝一個tabbar組件
附上我自己簡單封裝的一個組件
<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頁面的都需要使用計算屬性獲取tabbar數(shù)據(jù)!!
import { mapGetters } from 'vuex'; computed: { // 這里的tabBarList就是數(shù)據(jù)源,直接使用傳值 ...mapGetters(['tabBarList']) },
7.判斷是否登錄
我這里是有個登錄頁面的,在登錄頁面的時候進(jìn)行一個分配tabbar列表配置的一個操作(具體看個人業(yè)務(wù)邏輯)
// 存儲用戶信息 setUserWxInfo(userInfo); // 調(diào)用上文vuex,member就是已登錄的標(biāo)識 that.$store.commit('setType', 'member');
8.隱藏tabBar
上文提到我是在pages.json中配置tabBar的時候是沒有開啟custom自定義模式的,所以說他在頁面是有占位的
在APP.vue, 以及所用到tabbar的頁面,在onShow中調(diào)用 uni.hideTabBar({}); 對原始tabbar進(jìn)行一個隱藏
9.在APP.vue中 對用戶狀態(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é)~
大致就可以完成動態(tài)自定義tabbar這項需求了!
總結(jié)
到此這篇關(guān)于小程序自定義tabbar導(dǎo)航欄及動態(tài)控制tabbar功能實現(xiàn)方法(uniapp)的文章就介紹到這了,更多相關(guān)小程序自定義tabbar導(dǎo)航欄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
處理文本部分內(nèi)容的TextRange對象應(yīng)用實例
TextRange是用來表現(xiàn)HTML元素中文字的對象,是一個用于處理JavaScript對象文本部分內(nèi)容的一個對象2014-07-07