自定义微信导航栏

/**
   * 页面的初始数据
   */
  data: {
    bar_Height: wx.getSystemInfoSync().statusBarHeight,
    pos: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * tab选择事件
   */
  tabSelect: function (e) {
    this.setData({
      pos: e.currentTarget.dataset.pos
    })
  },

作者：beatzcs
链接：https://www.jianshu.com/p/8dbadb870382
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

{  "enablePullDownRefresh": true}

<view class='status-bar'>
 <view class='tabar' style='padding-top:{{bar_Height}}px;'>
   <text class='{{pos==0?"active":""}}' bindtap='tabSelect' data-pos='0'>推荐</text>
   <text class='{{pos==1?"active":""}}' bindtap='tabSelect' data-pos='1'>热门</text>
 </view>
</view>

.status-bar {  
    width: 100%;  background-color: #fdd901;
}
.tabar {  
    display: flex;  justify-content: center;
}
.tabar text {  
    padding: 25rpx 30rpx;  color: #353535;  font-size: 12pt;
}
.tabar .active {  
    color: #fff;
}

/**
  * 页面的初始数据
  */
 data: {   
      bar_Height: wx.getSystemInfoSync().statusBarHeight
 },

<view class='tabar' style='top:{{bar_Height}}px;'>
 <view>个人中心</view>
</view>

.tabar {  
     width: 100%;  
     box-sizing: border-box;  
     position: fixed;  
     text-align: center;  
     font-size: 12pt;  
     color: #fff;  
     background-color: #6cbc72;
}
.tabar view {  
     padding: 25rpx 0rpx;
}