小程序自定义navigationBar组件以及上滑修改navigationBar

前言

navigationBar相信大家都不陌生把？今天我们就来说说自定义navigationBar，把它改变成我们想要的样子。

这次做一个全自定义的nav-bar，适用于基本上所有的场景，简单易懂，便于修改

下面是官方支持的样式

文件预览

我们可以在根目录下创建一个components文件夹来存放我们的组件，然后创建nav-bar组件

WXML文件

里面的参数都是自定义的，包括：

显示返回按钮back-icon

显示返回主页按钮home-icon

显示文案nav-title

显示图片nav-icon

高度是自动获取的可以不用管

<view class='nav' style='height: {{indexNav?(status + navHeight):0}}px'>
    <view class="nav-warp">
    <view class='status' style='height: {{status}}px;{{containerStyle}};background:{{background}}'></view>
        <view class='navbar' style='height:{{navHeight}}px;{{containerStyle}};background:{{background}}'>
            <view class='back-icon' wx:if="{{backIcon}}" bindtap='back'>
                <image src='{{backIcon}}'></image>       
            </view>         
            <view class='home-icon' wx:if="{{homeIcon}}" bindtap='home'>            
                <image src='{{homeIcon}}'></image>        
            </view>        
            <view class='nav-icon' wx:if="{{titleImg && !navFlag}}">            
                <image src='{{titleImg}}' style='{{iconStyle}}'></image>       
            </view>
            <view class='nav-title' wx:if="{{titleText && navFlag}}">
                <text style='{{textStyle}}'>{{titleText}}</text>
            </view>
        </view>
    </view>
</view>    

WXSS文件

此处的css仅是包括上面各种icon的默认大小，字号等，可以自行修改

.nav-warp{
  width: 100%;
  position: fixed;
  z-index: 999;
}
.navbar{
  position: relative
}
.back-icon, .home-icon{
  width: 44px;
  height: 100%;
  position: absolute;    
  transform: translateY(-50%);    
  top: 50%;    
  display: flex;
  }
.back-icon{    
  left: 16px;
}
.home-icon{    
  left: 8px
}
.back-icon image{    
  width: 20rpx;    
  height: 32rpx;       
  margin: auto;
}
.home-icon image{    
  width: 20rpx;    
  height: 32rpx;    
  margin: auto;
  margin-left: 4rpx;
}
.nav-title, .nav-icon{    
  position: absolute;    
  transform: translate(-50%, -50%);    
  left: 50%;    
  top: 50%;    
  font-size: 0;    
  font-weight: bold;
}

JS文件

会自动计算顶部的刘海以及有哪些参数可以修改以及默认样式（properties里面的）

Component({
  properties: {
    background: {
      type: String,
      value: '#000', //背景色 默认：#000
    },
    color: {
      type: String, //字体颜色 默认：#fff
      value: '#fff',  
    },
    fontSize: { 
      type: Number, //字号 默认：16
      value: 16,
    },
    titleText: {
      type: String, //标题 默认：null
      value: '',
    },
    titleImg: {
      type: String, //icon标题 默认：null
      value: '',  
    },
    iconHeight: {
      type: Number, //icon标题高 默认：19
      value: 19,
    },
    iconWidth: {
      type: Number, //icon标题宽 默认：19
      value: 58,
    },
    backIcon: {
      type: String, //返回箭头 默认：白色
      value: 'https://wx.gtimg.com/resource/feuploader/202103/5f5920d5fdb50672730228b3f42664c3_20x36.png',
    },
    homeIcon: {
      type: String, //主页icon 默认：null
      value: '',
    },
    navFlag: {
      type: Boolean, // 控制标题的展示与隐藏 在设置了文字标题或者icon标题时 true：展示文字标题  false：展示icon标题
      value: false,
    },
    indexNav: { 
      type: Boolean, //是否给navbar自动设置高度  默认：true
      value: true,
    },
  },
  attached() {
    this.setNavSize();
    this.setStyle();
  },
  data: {
  },
  methods: {
    // 通过获取系统信息计算导航栏高度 
      const sysinfo = wx.getSystemInfoSync();
      const statusHeight = sysinfo.statusBarHeight;
      const isiOS = sysinfo.system.indexOf('iOS') > -1;
      let navHeight;
      if (!isiOS) {
        navHeight = 48;
      } else {
        navHeight = 44;
      }
      this.setData({
        status: statusHeight,
        navHeight,
      });
    },
    setStyle() {
      const containerStyle = [
        `background:${this.data.background}`,
      ].join(';');
      const textStyle = [
        `color:${this.data.color}`,
        `font-size:${this.data.fontSize}px`,
      ].join(';');
      const iconStyle = [
        `width: ${this.data.iconWidth}px`,
        `height: ${this.data.iconHeight}px`,
      ].join(';');
      this.setData({
        containerStyle,
        textStyle,
        iconStyle,
      });
    },
    // 返回事件
    back() {
      wx.navigateBack({
        delta: 1,
      });
      this.triggerEvent('back', { back: 1 });
    },
    home() {
      wx.navigateBack({
        delta: 1,
      });
      this.triggerEvent('home', {});
    },
  },
});

JSON文件

表示这是一个组件文件

{
  "component": true
}

引用时 

在对应使用组件的json文件中隐藏原生的navigationBar或者在全局中去隐藏

js文件中在data里面填写需要重置的数据

"usingComponents": {
  "nav-bar": "../../components/nav-bar/nav-bar"
},
"navigationStyle":"custom",

//数据
background: 'transparent',
titleText: '',
navFlag: false,
stickyFlag: false,
indexNav: false,
titleImg: 'https://wx.gtimg.com/resource/feuploader/202103/da4e3efae8ddccb704472c8854fe5aaa_630x96.png',
iconWidth: '157.5',
iconHeight: '24',
homeIcon: 'https://wx.gtimg.com/resource/feuploader/202103/5f5920d5fdb50672730228b3f42664c3_20x36.png',
radioFlag: false,
modelFlag: true,

在wxml中加上自己要重置的样式参数

 <nav-bar background="{{background}}" titleText = '{{titleText}}'  navFlag = "{{navFlag}}" stickyFlag = "{{stickyFlag}}" homeIcon='{{homeIcon}}'  indexNav = '{{indexNav}}' titleImg = "{{titleImg}}" iconWidth="{{iconWidth}}" iconHeight = "{{iconHeight}}" />

上滑页面修改nav-bar

 onPageScroll: function () {
        var _this = this;
        var query = wx.createSelectorQuery();
        query.select('.charge').boundingClientRect(function (rect) {
            var indextop = rect.top;
            console.log(indextop);
            if (indextop < -1) {
                _this.setData({
                    background: '#28AE66',
                    titleText: '充电宝隔夜归还保障',
                    navFlag: true,
                });
            }
            else {
                _this.setData({
                    background: 'transparent',
                    titleText: '',
                    navFlag: false,
                });
            }
        });
       
            .exec();
    },

以上内容纯手造轮子，仅作参考，不喜勿喷！！谢谢