UNIAPP 自帶的原生導(dǎo)航盡管流暢度非常好框杜，但是在具體項(xiàng)目中有的時(shí)候需要?jiǎng)討B(tài)設(shè)置以及特殊樣式的 底部菜單 這個(gè)時(shí)候就需要自己去寫一個(gè)自定義的底部tabbar
項(xiàng)目地址 fr_uni_app
1恋脚、比如需要特殊的圖標(biāo) 多出來一部分的
多出一部分的圖標(biāo)
2、根據(jù)登陸帳號的身份加載不同的tabbar
根據(jù)登陸帳號的身份加載不同的tabbar
動圖預(yù)覽
預(yù)覽
解決方案
- 將整個(gè)首屏4個(gè)頁面作為組件加載進(jìn)來 如 入口 index.vue
- 將 自定義tabbar 寫到 index.vue 中 或?qū)⑵浞庋b為組件 加載進(jìn)來
- 使用vuex 統(tǒng)一管理數(shù)據(jù)
- 使用小程序自定義組件去解析HTML代碼 （UNI的wxParse 看著麻煩 直接擼小程序自定義組件）
引入組件（頁面）
引入組件（頁面）
渲染首頁數(shù)據(jù)
底部tabbar的切換及數(shù)據(jù)來源
只要控制 store中的 底部菜單數(shù)據(jù) 即可拔第。頁面中動態(tài)渲染
export default {
state:{
footer_nav:[
{
name:'首頁',
name_code:'home',
icon:'/static/footer_icon/a2.png',
select_icon:'/static/footer_icon/a1.png'
},
{
name:'發(fā)布',
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('狀態(tài)碼：' + 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)
},
