评论

如何实现一个自定义导航栏

自定义导航栏实现

自定义导航栏在刚出的时候已经有很多实现方案了,但是还有大哥在问,那这里再贴下代码及原理:

首先在App.js的 onLaunch中获取当前手机机型头部状态栏的高度,单位为px,存在内存中,操作如下:
onLaunch() {
  wx.getSystemInfo({
      success: (res) => {
        this.globalData.statusBarHeight = res.statusBarHeight
        this.globalData.titleBarHeight = wx.getMenuButtonBoundingClientRect().bottom + wx.getMenuButtonBoundingClientRect().top - (res.statusBarHeight * 2)
      },
      failure() {
        this.globalData.statusBarHeight = 0
        this.globalData.titleBarHeight = 0
      }
    })
   } 
然后需要在目录下新建个components文件夹,里面存放此次需要演示的文件 navigateTitle
WXML 文件如下:
<view class="navigate-container">
  <view style="height:{{statusBarHeight}}px"></view>
  <view class="navigate-bar" style="height:{{titleBarHeight}}px">
    <view class="navigate-icon">
      <navigator class="navigator-back" open-type="navigateBack" wx:if="{{!isShowHome}}" />
      <navigator class="navigator-home" open-type="switchTab" url="/pages/index/index" wx:else />
    </view>
    <view class="navigate-title">{{title}}</view>
    <view class="navigate-icon"></view>
  </view>
</view>
<view class="navigate-line" style="height: {{statusBarHeight + titleBarHeight}}px; width: 100%;"></view>
WXSS文件如下:
.navigate-container {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
  background: #FFF;
}
 
.navigate-bar {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
 
.navigate-icon {
  width: 100rpx;
  height: 100rpx;
  display: flex;
  justify-content: space-around;
}
 
.navigate-title {
  width: 550rpx;
  text-align: center;
  line-height: 100rpx;
  font-size: 34rpx;
  color: #3c3c3c;
  font-weight: bold;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
 
/*箭头部分*/
.navigator-back {
  width: 36rpx;
  height: 36rpx;
  align-self: center;
}
 
.navigator-back:after {
  content: '';
  display: block;
  width: 22rpx;
  height: 22rpx;
  border-right: 4rpx solid #000;
  border-top: 4rpx solid #000;
  transform: rotate(225deg);
}
 
.navigator-home {
  width: 56rpx;
  height: 56rpx;
  background: url(https://qiniu-image.qtshe.com/20190301home.png) no-repeat center center;
  background-size: 100% 100%;
  align-self: center;
}
JS如下:
var app = getApp()
Component({
  data: {
    statusBarHeight: '',
    titleBarHeight: '',
    isShowHome: false
  },
  properties: {
    //属性值可以在组件使用时指定
    title: {
      type: String,
      value: '青团公益'
    }
  },
  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show() {
      let pageContext = getCurrentPages()
      if (pageContext.length > 1) {
        this.setData({
          isShowHome: false
        })
      } else {
        this.setData({
          isShowHome: true
        })
      }
    }
  },
  attached() {
    this.setData({
      statusBarHeight: app.globalData.statusBarHeight,
      titleBarHeight: app.globalData.titleBarHeight
    })
  },
  methods: {}
})
JSON如下:
{
  "component": true
}

如何引用?

需要引用的页面JSON里配置:
"navigationStyle": "custom",
"usingComponents": {
    "navigate-title": "/pages/components/navigateTitle/index"
  }
WXML
<navigate-title title="青团社" />
按上面步骤操作即可实现一个自定义的导航栏。 如何实现通栏的效果默认透明以及滚动更换title为白色背景,如下图所示:




最后代码片段如下:

https://developers.weixin.qq.com/s/wi6Pglmv7s8P。

以下为收集到的社区老哥们的分享:

@Yunior:
小程序顶部自定义导航组件实现原理及坑分享

@志军:
微信小程序自定义导航栏组件(完美适配所有手机),可自定义实现任何你想要的功能

@✨o0o有脾气的酸奶💤
[有点炫]自定义navigate+分包+自定义tabbar

@安晓苏
分享一个自适应的自定义导航栏组件

最后一次编辑于  2020-03-10  
点赞 28
收藏
评论

19 个评论

  • 志军
    志军
    2019-08-19

    自定义导航栏 (完美适配所有手机) 点我

    2019-08-19
    赞同
    回复
  • 128Kkk
    128Kkk
    2019-07-29

    我问下,用自定义导航栏的时候,该怎么配置enablePullDownRefresh为false吗,我用了自定义导航栏之后各个页面都能上下拉动,IOS的

    2019-07-29
    赞同
    回复 9
    • 厂危,速归。
      厂危,速归。
      2019-07-29
      所有页面都不允许下拉刷新吗?
      2019-07-29
      回复
    • 128Kkk
      128Kkk
      2019-07-29回复厂危,速归。
      部分页面,现在是一些不需要下拉刷新的页面总能上下拉
      2019-07-29
      回复
    • 厂危,速归。
      厂危,速归。
      2019-07-29
      在这些页面设置下enablePullDownRefresh。不过这个 我记得只有支付宝上有的呀,微信也有了么。
      2019-07-29
      回复
    • 128Kkk
      128Kkk
      2019-07-29回复厂危,速归。
      https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html#%E9%85%8D%E7%BD%AE%E9%A1%B9 对的,文档上写的,但是自定义导航栏之后,enablePullDownRefresh配置就不起效果了
      2019-07-29
      回复
    • 厂危,速归。
      厂危,速归。
      2019-07-29
      我试了下 我的正常的,你是咋写的。
      2019-07-29
      回复
    查看更多(4)
  • 迈克
    迈克
    2019-05-15

    向大佬学习!

    2019-05-15
    赞同
    回复
  • Congcun
    Congcun
    2019-05-08
    “通栏的效果默认透明以及滚动更换title为白色背景” 

    请大神详解如何实现


    2019-05-08
    赞同
    回复 6
    查看更多(1)
  • 墨染的天空
    墨染的天空
    2019-04-28

    totalTopHeight 这种写法不对,安卓很多机型不是这个值,有些偏差,尤其是那些有刘海的安卓。wx.getMenuButtonBoundingClientRect()可以解决问题。

    2019-04-28
    赞同
    回复 4
    • 厂危,速归。
      厂危,速归。
      2019-04-28

      好的。等有空尝试后 我更改下方法。

      2019-04-28
      回复
    • xiao卓
      xiao卓
      2019-05-20

      的确可以这样,但是我在部分机型发现这个接口获取到的数据存在不稳定,有时候获取到的数据全是0,有点bug

      2019-05-20
      回复
    • 墨染的天空
      墨染的天空
      2019-05-20回复xiao卓

      什么机型有问题?列举一两个,我试试

      2019-05-20
      回复
    • 素。
      素。
      2019-05-21回复墨染的天空

      iPhone8  tabbar多个的时候  除了首页的能获取高度  其余的获取的数据全是0  二级页面没问题  问题我已经提交社区了   得2.8.5才能修复这个bug

      2019-05-21
      回复
  • codeZeng🇨🇳
    codeZeng🇨🇳
    2019-04-26

    get✔

    2019-04-26
    赞同
    回复
  • 轩辕狗剩
    轩辕狗剩
    2019-04-26

    用wx.getMenuButtonBoundingClientRect()来获取胶囊参数,再计算导航栏的相关css比较好,用68在某些机型上有问题,不过getMenuButtonBoundingClientRect真机调试会造成微信闪退

    2019-04-26
    赞同
    回复 3
  • xiaohuihui
    xiaohuihui
    2019-04-26

    不错

    2019-04-26
    赞同
    回复
  • Narney
    Narney
    2019-04-26

    想问一下, 页面中其他fixed定位的内容该怎么处理

    比如吸顶菜单

    不处理的话就在最上方了

    2019-04-26
    赞同
    回复 2
    • 厂危,速归。
      厂危,速归。
      2019-04-26

      设置吸顶top为 statusBarHeight + titleBarHeight

      2019-04-26
      回复
    • lynn
      lynn
      2019-04-26

      向大佬学习

      2019-04-26
      1
      回复

正在加载...

登录 后发表内容