微信小程序-自定义导航栏组件（支持渐变色、纯色和透明色，并自动适配所有机型）

场景：

项目中要求导航栏是渐变色/透明色，像下面这样的效果：

image

image

微信官方提供的导航栏只支持纯色，是无法实现上述效果的。

解决方案：

微信小程序对导航栏提供了两种样式：一种是默认样式，就是支持纯色的那种；另一种是自定义样式，既然是自定义，那我们就可以为所欲为了。嘿嘿

image

为了节约时间，在网上搜了一下微信小程序的自定义导航栏，果然已经有大佬为我们实现：https://blog.csdn.net/qq_33744228/article/details/83656588 但是仅支持纯色和透明色，并且每个页面都要做适配（导航栏会覆盖页面内容，不同高度的导航栏要设置不同的“padding-top”）。

为了满足项目要求，在大佬的代码基础上扩充了如下功能：

1、支持渐变色：

利用CSS3提供的线性渐变（linear-gradient）实现：

-webkit-linear-gradient( [ || ,]? ,  [, ]* )

-webkit-: 表示适配webkit内核的浏览器；
[ || ,]?: 表示渐变的起始位置；
, [, ]*: 表示渐变的颜色；

例如：

background: -webkit-linear-gradient(top, orange, blue);

表示背景色从顶部开始由橙色渐变为蓝色。

2、组件内适配所有机型：

可以认为导航栏有两部分组成：状态栏+标题栏。不同的机型状态栏高度可能不同(除了刘海屏状态栏高度是44之外，其他手机状态栏高度都是20)，但标题栏高度都是44。微信小程序为我们提供了获取状态栏高度的方法：

wx.getSystemInfoSync().statusBarHeight

所以导航栏的高度为：

wx.getSystemInfoSync().statusBarHeight + 44

由于我们自定义的导航栏使用固定定位实现的，所以他就脱离了文档流，组件放进去后，会悬浮在上面，遮挡了下面的内容，这时候就需要给父元素加个“padding-top”，“padding-top”的值即是导航栏的高度值。这部分可以写到组件内部实现，不用在每个页面都做一次适配。

具体实现：

通过自定义组件实现，具体怎么自定义组件，可以参考官方文档：《自定义组件》。
一般自定义组件由 json wxml wxss js 4个文件组成，我这里为了方便实现，多加了两个文件：“back.png” 和 “navigation.wxs”：

image

“back.png”是导航栏的返回图标；“navigation.wxs”是为了处理渐变这种逻辑，需要渐变的颜色可以以一个数组形式传进来，使用比较方便。如果其他项目需要使用，只需要把navigation目录拖到项目中即可。下面直接贴出具体的实现代码：

navigation.json:

{
  "component": true,
  "usingComponents": {}
}

navigation.wxml:

  
    
    
      {{title}}   
    
  

navigation.wxss:

/* 顶部导航 */
.navigation.status-bar {
  width: 100%;
  z-index: 99998;
  position: fixed;
  top: 0;
}
.navigation.status-bar .goBack{
  position: absolute;
  top: 7.5px;
  font-size:12pt;
}
.navigation.status-bar .goBack image{
  width: 22px;
  height: 22px;
  padding: 6px 20px 0 15px;
}
.navigation.status-bar .tabar {
  display: flex;
  justify-content: center;
  background: #fff;
}
.navigation.status-bar .tabar2{
  background: transparent !important;
}
.navigation.status-bar .tabar2 text{
  color: #fff !important;
  /* font-weight: lighter !important; */
}
.navigation.status-bar .tabar text {
  height: 44px;
  line-height: 44px;
  /* padding: 10pt 15pt; */
  color: #fff;
  font-size: 17px;
  /* font-weight: bold; */
}
.navigation.status-bar .tabar .active {
  color: #fff;
}

navigation.js:

Component({
  /* 组件的属性列表 */
  properties: {
    title: {      // 设置标题
      type: String,
      value: ''
    },
    title_color: {      // 设置标题颜色
      type: String,
      value: '#fff'
    },
    show_bol: {     // 控制返回箭头是否显示
      type: Boolean,
      value: true
    },
    my_class: {     // 控制样式(背景是否透明)
      type: Boolean,
      value: false
    },
    background_color: {//背景颜色
      type: String,
      value: "#24AFFF"
    },
    linear_gradient: {  //是否渐变
      type: Boolean,
      value: true
    },
    direction: {  //颜色渐变方向
      type: String,
      value: "top"
    },
    color_stops: { //渐变的起止颜色数组
      type: Array,
      value: ["#24AFFF", "#EEE"]
    },
    content_offset: { //内容是否偏移（不让导航栏遮挡内容）
      type: Boolean,
      value: true
    }
  },
  /* 组件的初始数据 */
  data: {
    type: "组件",
    bar_Height: wx.getSystemInfoSync().statusBarHeight    // 获取手机状态栏高度
  },
  /* 组件的方法列表 */
  methods: {
    goBack: function () {         // 返回事件
      console.log("退后")
      wx.navigateBack({
        delta: 1,
      })
    }
  }
})

navigation.wxs:

var linearGradient = function (isLinearGradient, direction, colorStops) {
  if (isLinearGradient) {
    return 'background: -webkit-linear-gradient(' + direction + ',' + colorStops.join(",") + ');';
  }
  return '';
}

module.exports = {
  linearGradient: linearGradient
}

下拉刷新问题：

这样实现的导航栏，下拉刷新的动画（三个小圆点）是从屏幕顶部开始的，下拉距离不够大时会被导航栏给盖住。而使用默认的导航栏，下拉刷新动画是从导航栏底部开始的，不会被盖住。

用scroll-view来写下拉刷新

转载自：https://www.jianshu.com/p/9e89e60a1234