评论

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

自定义导航栏实现

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

首先在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:
小程序顶部自定义导航组件实现原理及坑分享

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

最后一次编辑于  1天前  (未经腾讯允许,不得转载)
点赞 13
收藏
评论

12 个评论

  • Yunior
    Yunior
    10-25

    感谢楼主分享,我也写了一个,目前还在想怎么把全屏的需求加入进去

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

    10-25
    赞同 2
    回复 3
  • 陈式坚
    陈式坚
    04-29

    恩 写死这种方法很骚 继续加油

    04-29
    赞同 1
    回复 2
  • W🐂🐂🐂
    W🐂🐂🐂
    08-23

    问一下  navigate-line  这个干啥用

    08-23
    赞同
    回复 3
    • 仙森ღ₅₂₀¹³¹⁴
      仙森ღ₅₂₀¹³¹⁴
      08-23
      导航栏区域的占位样式。导航栏是fixed定位的。下面得用内容撑起来。不然页面正常布局底部的内容区域会顶到顶部
      08-23
      回复
    • W🐂🐂🐂
      W🐂🐂🐂
      08-23回复仙森ღ₅₂₀¹³¹⁴
      恩,刚才样式没调用起来
      08-23
      回复
    • 仙森ღ₅₂₀¹³¹⁴
      仙森ღ₅₂₀¹³¹⁴
      08-23
      嗯嗯 你可以试试。随意改
      08-23
      回复
  • 志军
    志军
    08-19

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

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

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

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

    向大佬学习!

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

    请大神详解如何实现


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

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

    04-28
    赞同
    回复 4
    • 仙森ღ₅₂₀¹³¹⁴
      仙森ღ₅₂₀¹³¹⁴
      04-28

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

      04-28
      回复
    • 卓Zz...
      卓Zz...
      05-20

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

      05-20
      回复
    • 墨染的天空
      墨染的天空
      05-20回复卓Zz...

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

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

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

      05-21
      回复
  • Warwick🇨🇳 🇨🇳
    Warwick🇨🇳 🇨🇳
    04-26

    get✔

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

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

    04-26
    赞同
    回复 3

正在加载...