1.首先建立 custom-tab-bar 文件夹 包含 index.js index.json index.wxml
// index.js文件
Component({
data: {
active:
0,
list: [
{
"url": "/pages/index/index",
"icon": "wap-home-o",
"text": "首页"
},
{
"url": "/pages/index/prize",
"icon": "orders-o",
"text": "奖品"
},
{
"url": "/pages/index/exchange",
"icon": "points",
"text": "兑换"
},
{
"url": "/pages/index/my",
"icon": "user-circle-o",
"text": "我的"
}
]
},
methods: {
onChange(e) {
console.log(e,'e')
this.setData({ active: e.detail });
wx.switchTab({
url: this.data.list[e.detail].url
});
},
init() {
const page = getCurrentPages().pop();
this.setData({
active: this.data.list.findIndex(item => item.url === `/${page.route}`)
});
}
}
});
index.json文件
{
"component": true,
"usingComponents": {
"van-tabbar": "@vant/weapp/tabbar/index",
"van-tabbar-item": "@vant/weapp/tabbar-item/index",
"van-icon": "@vant/weapp/icon/index"
}
}
index.wxml文件
<van-tabbar active="{{ active }}" bind:change="onChange">
<van-tabbar-item wx:for="{{ list }}" wx:key="index" icon="{{ item.icon }}">{{
item.text
}}</van-tabbar-item>
</van-tabbar>
/**
* 生命周期函数--监听页面显示 在每个tabbar页面onshow 调用即可;
*/
onShow: function () {
console.log('个人中心')
this.getTabBar().init();
},
app.json文件
{
"pages": [
"pages/index/index",
"pages/index/prize",
"pages/index/exchange",
"pages/index/my"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"usingComponents": {
},
"tabBar": {
"custom": true,
"color": "#000000",
"selectedColor": "#000000",
"backgroundColor": "#000000",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/index/prize",
"text": "奖品"
},
{
"pagePath": "pages/index/exchange",
"text": "兑换"
},
{
"pagePath": "pages/index/my",
"text": "我的"
}
]
},
"sitemapLocation": "sitemap.json"
}
来源:oschina
链接:https://my.oschina.net/u/4360424/blog/4275727