微信小程序 自定义tabbar_小程序自定义tabbar

app.json

// 需要先定义tabBar页面
// “pages” 配置里面也不要忘了
"tabBar": {
   
    "custom": true,
    "list": [
      {
   
        "pagePath": "pages/index/index"
      },
      {
   
        "pagePath": "pages/goods/index"
      },
      {
   
        "pagePath": "pages/add/index"
      },
      {
   
        "pagePath": "pages/shop/index"
      },
      {
   
        "pagePath": "pages/my/index"
      }
    ]
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

app.js

// app.js
App({
   
  //定义全局setTabbar方法
  $setTabbar(that,currentName){
   
  	if(typeof that.getTabBar == 'function' && that.getTabBar()){
   
  		let tabbar = that.getTabBar();
        console.log(tabbar);
        tabbar.setData({
   
          currentName
        })
	}
  },
  onLaunch() {
   
  },
  globalData: {
   
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

add.wxml，shop.wxml，index.wxml，goods.wxml，my.wxml

Page({
   

  /**
   * 页面的初始数据
   */
  data
1
2
3
4
5
6
7