微信小程序自定义导航栏

首先在app.json中配置为自定义导航

"window": {
   "navigationStyle": "custom"
 },

接下来就是创建组件了 .wxml

<view class='nav' style='height: {{status + navHeight}}px'>
  <view class='status' style='height: {{status}}px;{{containerStyle}}'></view>
  <view class='navbar' style='height:{{navHeight}}px;{{containerStyle}}'>
    <view class='back-icon' wx:if="{{backIcon}}" bindtap='back'>
      <image src='{{backIcon}}'></image>
    </view>
    <view class='home-icon' style="left:{{backIcon?44:0}}px" wx:if="{{homeIcon}}" bindtap='home'>
      <image src='{{homeIcon}}'></image>
      <text>提示消息</text>
    </view>
    <view class='nav-icon' wx:if="{{titleImg}}">
      <image src='{{titleImg}}' style='{{iconStyle}}'></image>
    </view>
    <view class='nav-title' wx:if="{{titleText && !titleImg}}">
      <text style='{{textStyle}}'>{{titleText}}</text>
    </view>
  </view>
</view>

.wxss样式文件

.nav {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
}

.navbar {
    position: relative;
}

.back-icon,
.home-icon {
    height: 100%;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    display: flex;
    align-items: center;
}

.back-icon {
    width: 20px;
    left: 16px;
}

.home-icon {
    width: 80px;
    left: 44px;
}

.back-icon image {
    width: 28px;
    height: 28px;
    margin: auto;
}

.home-icon image,
.home-icon .avatar {
    width: 40px;
    height: 40px;
    margin: auto;
    overflow: hidden;
    display: inline-block;
    border-radius: 20px;
}

.home-icon text,
.home-icon .name {
    color: #333;
    font-size: 14px;
    margin-left: 4px;
}

.nav-title,
.nav-icon {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    font-size: 0;
    font-weight: bold;
}

js文件

const app = getApp();
Component({
    properties: {
        background: {
            type: String,
            value: 'rgba(103,194,255,1)'
        },
        color: {
            type: String,
            value: 'rgba(0, 0, 0, 1)'
        },
        titleText: {
            type: String,
            value: '首页'
        },
        titleImg: {
            type: String,
            value: ''
        },
        backIcon: {
            type: String,
            value: ''
        },
        homeIcon: {
            type: String,
            value: '../../imgs/loading.gif'
        },
        fontSize: {
            type: Number,
            value: 16
        },
        iconHeight: {
            type: Number,
            value: 19
        },
        iconWidth: {
            type: Number,
            value: 58
        }
    },
    attached: function() {
        var that = this;
        that.setStyle();
    },
    data: {
        status: app.globalData.statusHeight,
        navHeight: app.globalData.navHeight
    },
    methods: {
        setStyle: function() {
            var that = this,
                containerStyle, textStyle, iconStyle;
            containerStyle = [
                'background:' + that.data.background
            ].join(';');
            textStyle = [
                'color:' + that.data.color,
                'font-size:' + that.data.fontSize + 'px'
            ].join(';');
            iconStyle = [
                'width: ' + that.data.iconWidth + 'px',
                'height: ' + that.data.iconHeight + 'px'
            ].join(';');
            that.setData({
                containerStyle: containerStyle,
                textStyle: textStyle,
                iconStyle: iconStyle
            })
        },
        // 返回事件 
        back: function() {
            wx.navigateBack({
                delta: 1
            })
            this.triggerEvent('back', {
                back: 1
            })
        },
        home: function() {
            this.triggerEvent('home', {});
        }
    }
})

.json文件中配置为组件

{
  "component": true
}

这里我们在入口js也就是小程序app.js文件中要获取设备信息

onLaunch: function() {
    wx.getSystemInfo({
         success: res => {
              var isiOS = res.system.indexOf('iOS') > -1,
                  navHeight;
              if (isiOS) {
                 navHeight = 48;
              } else {
                  navHeight = 44;
              }
              this.globalData.statusHeight = res.statusBarHeight; //设备状态栏的高度
              this.globalData.navHeight = navHeight; //导航栏高度
              this.globalData.screenHeight = res.windowHeight; //存储设备高度
          },
          fail(err) {
              console.log(err);
          }
})

如果在使用scroll-view组件时需要通过计算来确定内容显示区域高度