评论

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

自定义导航栏实现

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

首先在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  
点赞 34
收藏
评论

21 个评论

  • Yunior
    Yunior
    2019-10-25

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

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

    2019-10-25
    赞同 3
    回复 3
    • TNT
      TNT
      2019-10-25
      顶顶顶
      2019-10-25
      回复
    • TNT
      TNT
      2019-10-25
      放到文章里了
      2019-10-25
      回复
    • Yunior
      Yunior
      2019-10-25回复TNT
      赞,谢谢老哥
      2019-10-25
      回复
  • Sugar
    Sugar
    2021-08-30

    这就是大佬的世界吗?

    2021-08-30
    赞同 1
    回复 1
    • TNT
      TNT
      2021-08-30
      大佬有何吩咐~
      2021-08-30
      回复
  • 陈式坚
    陈式坚
    2019-04-29

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

    2019-04-29
    赞同 1
    回复 2
  • good
    good
    2022-01-26

    全部复制粘贴,变成这样了,怎么办?

    [ pages/my/my.json 文件内容错误] pages/my/my.json: ["usingComponents"]["navigate-title"] 未找到(env: Windows,mp,1.05.2110290; lib: 2.19.4)

    2022-01-26
    赞同
    回复 2
    • TNT
      TNT
      2022-01-26
      my/my.json里写的  navigate-title没找到
      2022-01-26
      回复
    • TNT
      TNT
      2022-01-26
      看下你的引用路径
      2022-01-26
      回复
  • 逐渐阔朗的呼噜
    逐渐阔朗的呼噜
    2020-09-09

    难道没有遇到:

    自定义组件attached已执行,但onLanuch钩子中的方法还未执行返回的情况吗?

    2020-09-09
    赞同
    回复 2
    • TNT
      TNT
      2020-09-09
      没遇到过。
      2020-09-09
      1
      回复
    • 逐渐阔朗的呼噜
      逐渐阔朗的呼噜
      2020-09-09回复TNT
      好吧
      2020-09-09
      回复
  • 一骑白马开吴疆🐎
    一骑白马开吴疆🐎
    2020-06-15

    底部弹出式切换试试这个组件https://github.com/MakerGYT/mini-menu

    2020-06-15
    赞同
    回复
  • 光光
    光光
    2020-04-29

    上下跟胶囊不垂直居中


    2020-04-29
    赞同
    回复 3
    • TNT
      TNT
      2020-04-29
      机型多少
      2020-04-29
      回复
    • 光光
      光光
      2020-04-29回复TNT
      我看你截图的那个就不对
      2020-04-29
      回复
    • 三毛
      三毛
      2022-05-24
      应该加一个align-item:center  就好了,没试,看代码是这样的。
      2022-05-24
      回复
  • 壶里乾坤大 茶中滋味多
    壶里乾坤大 茶中滋味多
    2020-03-09

    老大帮看一下,出现这样的错误怎么办?


    VM2177:1 thirdScriptError

    wx.getMenuButtonBoundingClientRect is not a function;at App lifeCycleMethod onLaunch function

    TypeError: wx.getMenuButtonBoundingClientRect is not a function

        at e.onLaunch (http://127.0.0.1:16547/appservice/app.js:8:20)

        at e.o (http://127.0.0.1:16547/appservice/__dev__/WAService.js:18:8686)

        at new e (http://127.0.0.1:16547/appservice/__dev__/WAService.js:18:10040)

        at Function.<anonymous> (http://127.0.0.1:16547/appservice/__dev__/WAService.js:18:10529)

        at http://127.0.0.1:16547/appservice/__dev__/WAService.js:17:22296

        at http://127.0.0.1:16547/appservice/app.js:4:1

        at require (http://127.0.0.1:16547/appservice/__dev__/WAService.js:18:16253)

        at <anonymous>:1:1

        at HTMLScriptElement.scriptLoaded (http://127.0.0.1:16547/appservice/appservice?t=1583757840230:1229:21)

        at HTMLScriptElement.script.onload (http://127.0.0.1:16547/appservice/appservice?t=1583757840230:1241:20)

    console.error @ VM2177:1

    errorReport @ VM2193 WAService.js:3

    thirdErrorReport @ VM2193 WAService.js:3

    (anonymous) @ VM2193 WAService.js:3

    o @ VM2193 WAService.js:18

    e @ VM2193 WAService.js:18

    (anonymous) @ VM2193 WAService.js:18

    (anonymous) @ VM2193 WAService.js:17

    (anonymous) @ app.js? [sm]:2

    require @ VM2193 WAService.js:18

    (anonymous) @ VM2206:1

    scriptLoaded @ appservice?t=1583757840230:1229

    script.onload @ appservice?t=1583757840230:1241

    load (async)

    (anonymous) @ appservice?t=1583757840230:1240

    (anonymous) @ appservice?t=1583757840230:1293

    VM2207:4 Mon Mar 09 2020 20:44:01 GMT+0800 (中国标准时间) sitemap 索引情况提示

    2020-03-09
    赞同
    回复 1
    • TNT
      TNT
      2020-03-10
      这是因为用户客户端版本过低,假如是6.6.6版本,基础库里没有wx.getMenuButtonBoundingClientRect这个方法的api,所以会抛出这个错误,建议你设置线上最低基础库版本为2.1.0以上即可。这个api的基础库2.1.0开始支持。对应线上版本6.6.7
      2020-03-10
      回复
  • 壶里乾坤大 茶中滋味多
    壶里乾坤大 茶中滋味多
    2020-03-09

    为啥第一段粘进app.js就报错


    2020-03-09
    赞同
    回复 1
    • TNT
      TNT
      2020-03-10
      再试下,第一段少了个} 我只是演示用这段代码 获取状态栏高度而已
      2020-03-10
      回复
  • ORɪɢɪɴᴀʟ.
    ORɪɢɪɴᴀʟ.
    2019-12-16

    为什么我打不开啊

    2019-12-16
    赞同
    回复 2
    • TNT
      TNT
      2019-12-16
      啥打不开
      2019-12-16
      回复
    • TNT
      TNT
      2020-03-24
      代码片段需要开启工具再点链接
      2020-03-24
      回复

正在加载...

登录 后发表内容