欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

小程序自定義tabbar導(dǎo)航欄及動態(tài)控制tabbar功能實現(xiàn)方法(uniapp)

 更新時間:2022年12月28日 12:15:24   作者:別改我bug  
在項目中遇到一個需求,根據(jù)不同的賬號,生成不同的tabBar,下面這篇文章主要給大家介紹了關(guān)于小程序自定義tabbar導(dǎo)航欄及動態(tài)控制tabbar功能實現(xiàn)方法(uniapp)的相關(guān)資料,需要的朋友可以參考下

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)文章

  • js捕獲鼠標(biāo)滾輪事件代碼

    js捕獲鼠標(biāo)滾輪事件代碼

    本文為大家介紹下如何使用js捕獲鼠標(biāo)滾輪事件,原理很簡單,感興趣的朋友可以參考下
    2013-12-12
  • 使用echarts實現(xiàn)3d柱狀圖+折線圖

    使用echarts實現(xiàn)3d柱狀圖+折線圖

    這篇文章主要為大家詳細(xì)介紹了如何使用echarts實現(xiàn)3d柱狀圖和折線圖,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,有需要的小伙伴可以了解一下
    2024-12-12
  • 處理文本部分內(nèi)容的TextRange對象應(yīng)用實例

    處理文本部分內(nèi)容的TextRange對象應(yīng)用實例

    TextRange是用來表現(xiàn)HTML元素中文字的對象,是一個用于處理JavaScript對象文本部分內(nèi)容的一個對象
    2014-07-07
  • JS實現(xiàn)百度新聞導(dǎo)航欄效果

    JS實現(xiàn)百度新聞導(dǎo)航欄效果

    這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)百度新聞導(dǎo)航欄效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-10-10
  • bootstrap table表格插件使用詳解

    bootstrap table表格插件使用詳解

    這篇文章主要為大家詳細(xì)介紹了bootstrap table表格插件使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-05-05
  • JavaScript從0開始構(gòu)思表情插件

    JavaScript從0開始構(gòu)思表情插件

    在項目開發(fā)階段很多項目都會用到表情插件,接下來通過本文給大家介紹了JavaScript從0開始構(gòu)思表情插件 的相關(guān)資料,需要的朋友可以參考下
    2016-07-07
  • 詳解微信小程序官方人臉核身認(rèn)證

    詳解微信小程序官方人臉核身認(rèn)證

    本文主要介紹了微信小程序官方人臉核身認(rèn)證,感興趣的同學(xué),可以參考下,并且試驗一下。
    2021-06-06
  • 理解javascript async的用法

    理解javascript async的用法

    本篇文章主要介紹了理解javascript async的用法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • 微信公眾號網(wǎng)頁分享功能開發(fā)的示例代碼

    微信公眾號網(wǎng)頁分享功能開發(fā)的示例代碼

    這篇文章主要介紹了微信公眾號網(wǎng)頁分享功能開發(fā)的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-05-05
  • ECharts鼠標(biāo)事件的處理方法詳解

    ECharts鼠標(biāo)事件的處理方法詳解

    最近一直在使用echarts,當(dāng)然也被其中的各種屬性整的有些頭大,這篇文章主要給大家介紹了關(guān)于ECharts鼠標(biāo)事件處理的相關(guān)資料,需要的朋友可以參考下
    2021-06-06

最新評論