uni-app中自定義動態底部tabbar（附示例源碼）

UNIAPP 自帶的原生導航儘管流暢度很是好，可是在具體項目中有的時候須要動態設置以及特殊樣式的 底部菜單 這個時候就須要本身去寫一個自定義的底部tabbar

項目地址 fr_uni_app

一、好比須要特殊的圖標 多出來一部分的

二、根據登錄賬號的身份加載不一樣的tabbar

動圖預覽

解決方案

• 將整個首屏4個頁面做爲組件加載進來 如 入口 index.vue
• 將 自定義tabbar 寫到 index.vue 中 或將其封裝爲組件 加載進來
• 使用vuex 統一管理數據
• 使用小程序自定義組件去解析HTML代碼 （UNI的wxParse 看着麻煩 直接擼小程序自定義組件）

引入組件（頁面）

底部tabbar的切換及數據來源

只要控制 store中的 底部菜單數據 便可。頁面中動態渲染

export default {
	state:{
		footer_nav:[
			{
				name:'首頁',
				name_code:'home',
				icon:'/static/footer_icon/a2.png',
				select_icon:'/static/footer_icon/a1.png'
			},
			{
				name:'發佈',
				name_code:'publish',
				icon:'/static/footer_icon/f2.png',
				select_icon:'/static/footer_icon/f1.png'
			},
			{
				name:'個人',
				name_code:'my',
				icon:'/static/footer_icon/d1.png',
				select_icon:'/static/footer_icon/d2.png'
			},
			
		],
		now_page_index:0,
	},
	mutations:{
		change_page(state,index){
			state.now_page_index = index;
		}
	}
}
複製代碼

添加了本身經常使用的 request請求模塊

//請求示例
			this.$ajax
				.get({
					url: '/admin/get_product_list',
					data: {
						a: 1
					}
				})
				.then(res => {
					this.$alert('狀態碼：' + res.code);
					console.log(res);
				});
複製代碼

添加了本身封裝的 上傳圖片的 模塊

//上傳示例
			async choose_img_upload(n) {
				this.data_null()
				let uploader = new this.$Uploader();
				let path_arr = await uploader.choose_and_upload(n);
				console.log(path_arr);
				this.img_urls = path_arr;
				console.log(this.img_urls)
			},
複製代碼