1.app.wpy
文件中的tabBar的list也要配置好,如下
...
config = {
...
tabBar: {
...
'list': [
{
'selectedIconPath': 'images/banxue-active.png',
'iconPath': 'images/banxue.png',
'pagePath': 'pages/index',
'text': '伴学'
},
{
'selectedIconPath': 'images/my-active.png',
'iconPath': 'images/my.png',
'pagePath': 'pages/my',
'text': '我的'
}
]
}
}
...
2.在app.wpy
文件中添加
onLaunch() {
// 使用自定义tabBar, 隐藏tabBar
wx.hideTabBar()
}
3.新建tabbar.wpy
4.在要显示tabbar的页面中引入tabbar.wpy
文件,并在该页面的onShow
生命周期中隐藏微信的tabBar
// index.wpy
<template>
<view>
···页面内容
<tabBar></tabBar>
</view>
</template>
// 引入tabbar.wpy文件
import TabBar from '../components/tabbar'
export default class Index extends wepy.page {
components = {
tabBar: TabBar
}
onShow () {
// 使用自定义tabBar, 隐藏微信的tabBar
wx.hideTabBar()
}
}
网友评论