UNIAPP 自帶的原生導航儘管流暢度非常好，但是在具體專案中有的時候需要動態設定以及特殊樣式的 底部選單 這個時候就需要自己去寫一個自定義的底部tabbar
專案地址 fr_uni_app
1、比如需要特殊的圖示 多出來一部分的
2、根據登陸帳號的身份載入不同的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)
},
複製程式碼