小程序组件之自定义顶部导航实例(2)

到此，一个自定义导航组件就完整地实现了。还在为兼容或者调用时需要适配很多的问题而一筹莫展的童鞋，看到这儿是不是可以展颜了呀。完整代码呈现如下：

github分享：github.com/linger777/x…

gitee分享：gitee.com/linger777/x…

小程序片段分享：developers.weixin.qq.com/s/AzGaZTmV7…

有需要的童鞋自取。下面给大家介绍下如何使用：

使用说明

定义页面自定义顶部导航

config = { navigationStyle: "custom" };

引入组件

import navbar from '@/components/navbarNew'

注册组件

components = {navbar, }

调用组件

<navbar :navbar.sync="navbar"></navbar>

赋值

data = { navbar: { flag: true, //是否使用navbar title: '顶部导航', // 自定义导航标题 height: '' // 导航高度 }, }

如页面遇到有 sticky \ fixed 定位的view，按需要可以通过加入style进行调整

以上就是对自定义顶部导航的全部分享，如有不解，欢迎留言讨论。