微信小程序自定义navigationbar

整体介绍

        在开发过程中，遇到自定义navigationbar的问题，已解决，做记录用

        下面的代码的自定义navigationbar，效果为页面未滚动时，背景透明，无页面标题；页面滚动，背景颜色改变，页面标题出现。整体代码适用于与单个页面设置。

样式展示

代码

• 单页面设置navigationbar

        .wxml代码

<view class="navigation" style="background-color: {{navigationBackgroundColor}}; height: {{paddingTopNum}}px; padding-top: {{statusBarHeight}}px;">
	<!-- 左边的返回按钮图标 -->
	<view class='navigation_bar_left' bindtap="back">
		<view class="iconfont icon-fanhuijian"></view>
	</view>
    <!-- 页面标题 -->
	<view class='navigation_bar_center'>
		<view>{{navigationBarTitleText}}</view>
	</view>
</view>
<view class="box">
	<view>再蹚一条人世间的河，那些你跌落过的沟壑</view>
	<view>再蹚一条人世间的河，那些你跌落过的沟壑</view>
	<view>再蹚一条人世间的河，那些你跌落过的沟壑</view>
	<view>再蹚一条人世间的河，那些你跌落过的沟壑</view>
	<view>再蹚一条人世间的河，那些你跌落过的沟壑</view>
	<view>再蹚一条人世间的河，那些你跌落过的沟壑</view>
	<view>再蹚一条人世间的河，那些你跌落过的沟壑</view>
	<view>再蹚一条人世间的河，那些你跌落过的沟壑</view>
	<view>再蹚一条人世间的河，那些你跌落过的沟壑</view>
	<view>再蹚一条人世间的河，那些你跌落过的沟壑</view>
	<view>再蹚一条人世间的河，那些你跌落过的沟壑</view>
	<view>再蹚一条人世间的河，那些你跌落过的沟壑</view>
    <view>再蹚一条人世间的河，那些你跌落过的沟壑</view>
	<view>再蹚一条人世间的河，那些你跌落过的沟壑</view>
	<view>再蹚一条人世间的河，那些你跌落过的沟壑</view>
	<view>再蹚一条人世间的河，那些你跌落过的沟壑</view>
	<view>再蹚一条人世间的河，那些你跌落过的沟壑</view>
	<view>再蹚一条人世间的河，那些你跌落过的沟壑</view>
	<view>再蹚一条人世间的河，那些你跌落过的沟壑</view>
	<view>再蹚一条人世间的河，那些你跌落过的沟壑</view>
	<view>再蹚一条人世间的河，那些你跌落过的沟壑</view>
	<view>再蹚一条人世间的河，那些你跌落过的沟壑</view>
	<view>再蹚一条人世间的河，那些你跌落过的沟壑</view>
	<view>再蹚一条人世间的河，那些你跌落过的沟壑</view>
</view>

         .wxss代码 

.navigation {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5001;
  width: 100%;
  color: #fff;
  display: flex;
  align-items: center;
}


.navigation_bar_left {
  padding-left: 10rpx;
  align-items: center;
}

.navigation_bar_left .icon-fanhuijian{
  font-size: 30rpx;
}

.navigation_bar_center {
  font-size: 26rpx;
  text-align: center;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  flex: 1;
}

         .js代码 

Page({

  /**
   * 页面的初始数据
   */
  data: {
    navigationBarTitleText: '',
    navigationBackgroundColor: '',
    paddingTopNum: '',
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.paddingTopNum()
  },


  /**
   * 监听滚动scrollTop滚动的距离,获取滚动条当前位置
   * 当滚动
   * */
  onPageScroll: function (e) {
    let navigationBarTitleText = '页面标题'
    if (e.scrollTop > 0) {
      this.setData({
        navigationBarTitleText: navigationBarTitleText,
        navigationBackgroundColor: '#8abcd1',
      })
    } else {
      this.setData({
        navigationBarTitleText: '',
        navigationBackgroundColor: '',
      })
    }

  },

  /* 
    自定义tab高度设置
  */
  paddingTopNum: function () {
    const {
      height,
      top
    } = wx.getMenuButtonBoundingClientRect()

    const {
      statusBarHeight
    } = wx.getSystemInfoSync();

    const navbarH = (top - statusBarHeight) * 2 + height + statusBarHeight

    this.setData({
      paddingTopNum: navbarH,
      statusBarHeight:statusBarHeight
    })
  },

  //自定义导航返回图标操作
  back () {
    wx.navigateBack({
      delta: 1
    }).then(res => {
      console.log(res)
    }).catch(err => {
      // 如果报错，说明是通过二维码或者分享进入的，直接返回首页
      wx.reLaunch({
        url: '../../../pages/index/index',
      })
    })
  },
})

 组件设置navigationbar

         .wxml代码

<!-- 自定义navigationBar -->
<view class="navigation" style="background-color: {{navigationBackgroundColor}}; height: {{paddingTopNum}}px; padding-top: {{statusBarHeight}}px;">
	<!-- 左边的返回按钮图标 -->
	<view class='navigation_bar_left' bindtap="back">
		<view class="iconfont icon-fanhuijian"></view>
	</view>
	<view class='navigation_bar_center'>
		<view>{{navigationBarTitleText}}</view>
	</view>
</view>

          .wxss代码 

.navigation {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5001;
  width: 100%;
  color: #fff;
  display: flex;
  align-items: center;
}

.navigation_bar_left {
  padding-left: 10rpx;
  align-items: center;
}

.navigation_bar_left .icon-fanhuijian{
  font-size: 30rpx;
}

.navigation_bar_center {
  font-size: 26rpx;
  text-align: center;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  flex: 1;
}

        .js代码

Component({
  options: {
    addGlobalClass: true
  },

  /**
   * 组件的属性列表
   */
  properties: {
    navigationBackgroundColor: {
      type: String,
      value: ''
    },
    navigationBarTitleText: {
      type: String,
      value: ''
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    paddingTopNum: '',
    statusBarHeight: '',
  },

  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function () {

      const {
        height,
        top
      } = wx.getMenuButtonBoundingClientRect()
      const {
        statusBarHeight
      } = wx.getSystemInfoSync();
      const navbarH = (top - statusBarHeight) * 2 + height + statusBarHeight
      this.setData({
        paddingTopNum: navbarH,
        statusBarHeight: statusBarHeight
      })

     },
  },

  /**
   * 组件的方法列表
   */
  methods: {

    //自定义导航返回图标操作
    back() {
      wx.navigateBack({
        delta: 1
      }).then(res => {
        console.log(res)
      }).catch(err => {
        // 如果报错，说明是通过二维码或者分享进入的，直接返回首页
        wx.reLaunch({
          url: '../../../pages/index/index',
        })
      })
    },

  },

})

         父组件引用

                .wxml代码

<component-header navigationBackgroundColor="{{navigationBackgroundColor}}" navigationBarTitleText="{{navigationBarTitleText}}"></component-header>

                .js代码

data: {
    navigationBarTitleText: '',
    navigationBackgroundColor: '',
  },
  /**
   * 监听滚动scrollTop滚动的距离,获取滚动条当前位置
   * 当滚动
   * */
  onPageScroll: function (e) {
    let navigationBarTitleText = '健康报告'
    if (e.scrollTop > 400) {
      this.setData({
        navigationBarTitleText: navigationBarTitleText,
        navigationBackgroundColor: '#8C69CD',
      })
    } else {
      this.setData({
        navigationBarTitleText: '',
        navigationBackgroundColor: '',
      })
    }
  },