微信小程序自定义navigationbar与下拉刷新思考

第一次开发小程序，产品提出要求导航栏字体样式，然后系统的未提供修改的接口。
那么只能自定义导航栏才行呀。
迅速的自定义了一个导航栏
app.json中添加
"navigationStyle": "custom"
创建一个component
wxml

<view class='status-bar'>
    <view class='goBack' bindtap='goBack' style="padding-top:{{bar_Height}}px;"  hidden='{{show_bol}}'>			
    <!-- /*返回按钮*/ -->
      <image src='../../../images/nav.png'></image>
    </view>
    <view class="{{my_class ? 'tabar2':'tabar'}}" style="padding-top:{{bar_Height}}px;">
      <text class="red">{{title}}</text>
    </view>
    <view class="{{line_h ? 'line-h-no':'line-h'}}" ></view>
  </view>

js

// pages/component/navbar/index.js
const app = getApp()
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title: {			// 设置标题
      type: String,
      value: ''
    },
    show_bol: {			// 控制返回箭头是否显示
      type: Boolean,
      value: false
    },
    my_class: {			// 控制样式
      type: Boolean,
      value: false
    },
    line_h: {			// 控制样式
      type: Boolean,
      value: false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    type: "组件",
    bar_Height: wx.getSystemInfoSync().statusBarHeight	
  },

  /**
   * 组件的方法列表
   */
  methods: {
    goBack: function () {					// 返回事件
      console.log("退后")
      wx.navigateBack({
        delta: 1,
      })
    }
  }
})

wxss/

/* pages/component/navbar/index.wxss */
.status-bar {
  width: 100%;
  z-index: 99999;
  position: fixed;
  top: 0;
}
.goBack{
  position: absolute;
  top: 15rpx;
  font-size:12pt;
}
.goBack image{
  width: 21rpx;
  height: 40rpx;
  padding: 12rpx 20px 0 30rpx;
}
.tabar {
  display: flex;
  justify-content: center;
  background-color: #fff;
}
.tabar2{
  /* background: transparent !important; */
  display: flex;
  justify-content: center;
  background-color: #4884EE;
}
.tabar2 text{
  /* color: #fff !important;
  font-weight: lighter !important; */
  padding: 20rpx 30rpx;
  color: #fff;
  font-size: 34rpx;
  font-weight: bold;
}
.tabar text {
  padding: 20rpx 30rpx;
  color: #131A32;
  font-size: 34rpx;
  font-weight: bold;
}

.line-h {
  width: 100%;
  height: 1rpx;
  background-color: #F5F5F5;
}

.line-h-no {
  width: 100%;
  height: 0rpx;
  background-color: #F5F5F5;
}

page中的wxml中引入
当然不要忘记json中引入组件哦。

<view class='box-detail' style="padding-top:{{widnowH <=568 ?bar_Height + 40:bar_Height + 45}}px;">
  <nav-bar title='大鱼' show_bol='{{true}}' my_class='true' line_h='true'></nav-bar>
</view>
...

以上，自定义导航已经完美解决了。
但是。。。开发列表页面时，做下拉刷新的时候发现被导航栏覆盖，而且页面回弹有误。
一番百度，发现了两篇好文章。
小程序自定义导航栏后下拉刷新思考
微信小程序-自定义下拉刷新

了解到。微信小程序的一些小瑕疵。
1.自定义导航+自定义下拉刷新
2.系统导航+自定义下拉刷新/系统下拉刷新
只能有这两种模式。所以，开发小程序的小伙伴，如果选择自定义导航的话，就需要自定义下拉刷新，并且要注意andriod和iOS的适配问题哦。。。