0、page.json定义页面pages
//page.json
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/indexPage/index", //首页
"style": {
"navigationStyle": "custom",
"navigationBarTextStyle": "white"
}
},
{
"path": "pages/my/index",
"style": {
"navigationStyle": "custom" // 我的
}
},
{
"path": "pages/playList/index",
"style": {
"navigationStyle": "custom", // 列表
"enablePullDownRefresh": true
}
}
],
1、 page.json中定义tabbar 并设置自定义样式 “custom”: true
//page.json
"tabBar": {
"custom": true,
"selectedColor": "#79D5AD",
"color": "#999999",
"backgroundColor": "#ffffff",
"borderStyle": "white",
"height": "0px",
"list": [{
"pagePath": "pages/indexPage/index",
"text": " "
}, {
"pagePath": "pages/playList/index",
"text": " "
}, {
"pagePath": "pages/my/index",
"text": " "
}]
}
2、封装tabbar公共组件,在实现页面跳转的时候用uni.switchTab()方法
//pl_footer.vue 自己封的组件
uni.switchTab({
url: "/pages/indexPage/index",
success: function(e) { //跳转成功后刷新页面
var page = getCurrentPages().pop();
if (page == undefined || page == null) return;
page.onLoad();
}
})
3、在tabar页面中
(1) 引用公共组件
// index.vue 首页
<view>
<tarBar tarbarType="index"></tarBar>
</view>
...
import tarBar from '@/components/pl_nav/pl_footer.vue'
...
components: {
PlayCard: playCard,
tarBar: tarBar
}
(2)、uni.hideTabBar()隐藏原来的页面 一定要有
//index.vue
onShow(e) {
uni.hideTabBar({ //去掉自带的tabar
})
}