微信小程序—子页面显示tabbar（自定义组件），样式和app.json定义的tabBar相同_在app.json里直接增加tabbar只是首页的几个页面进行切换才会显示,但是如果想在子

注意：在app.json里直接增加tabBar只是首页的几个页面进行切换才会显示，但是如果想在子页面也显示就需要自定义tabbar组件，在想使用的子页面按下面的方法引入就可以了

1、自定义tabBar组件

注意：可以新建一个目录叫做components，专门放封装好的组件，注意在tabbar目录里新建Component（组件），而不是新建Page

2、tabbar.wxml

<view class="tab-bar">   
  <block wx:for="{{tabBar}}" wx:key="{{tabBar.pagePath}}">    
  // data-url 传递参数，可以在navigateDetail方法中的e.currentTarget.dataset.url获取，在tabbar.js代码块中可以看到
    <view class="section_item" bindtap="navigateDetail" data-url="{{item.pagePath}}">  
        <image class="section_image" src="{{item.iconPath}}"></image>  
        <text class="section_title">{{item.text}}</text>
    </view>
  </block> 
</view>    
1
2
3
4
5
6
7
8
9

3、tabbar.wxss

注意：目测看上去和app.json定义的tabbar的样式是相同的

.tab-bar {
  width: 100%;
  height: 95rpx;
  position: fixed;
  bottom: 0;
  background: #F6F6F7;
  display: flex;
  z-index: 999;
}
.section_item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 5rpx 0 0 0;
}
.section_item .section_image {
  width: 55rpx;
  height: 55rpx;
}
.section_item .section_title {
  font-size: 20rpx;
  font-weight:300;
}
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

4、tabbar.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
  },

  /**
   * 组件的初始数据
   */
  data: {
    tabBar: [
      {
        "pagePath": "../../pages/index/index",
        "text": "首页",
        "iconPath": "../../images/index_icon.png" // 因为子页面点击图标的不需要变化，因为直接跳转到首页了
      },
      {
        "pagePath": "../../pages/user/user",
        "text": "我的",
        "iconPath": "../../images/user_icon.png"
      }
    ]
  },

  /**
   * 组件的方法列表
   */
  methods: {
    navigateDetail: function (e) {
      wx.reLaunch({ // 关闭所有打开过的页面，跳转到相对于的页面
        url: e.currentTarget.dataset.url  // 获取tabbar.wxml中data-url传递的参数
      })
    }
  }
})

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
29
30
31
32
33
34
35
36
37

5、使用页面的json文件

{
  "usingComponents": {
    "tabBar": "../../components/tabbar/tabbar"
  }
}
1
2
3
4
5

6、使用页面的wxml增加

<tabBar></tabBar>
1

7、使用页面的wxss

.container {
  margin-bottom: 100rpx; // 因为tabbar有100rpx高度
}
1
2
3