// components/navigation/index.js const app = getApp() Component({ /** * 组件的初始数据 */ data: { navBarHeight: app.globalData.navBarHeight, //导航栏高度 menuRight: app.globalData.menuRight, // 胶囊距右方间距（方保持左、右间距一致） menuBotton: app.globalData.menuBotton, menuHeight: app.globalData.menuHeight } })
页面引用
页面配置引入该自定义组件
//index.json { "navigationStyle": "custom", "navigationBarTextStyle": "white", "usingComponents": { "navigation": "/components/Navigation/index" } }
页面中使用
<!-- 自定义导航 --> <navigation> <view> <text>4月24日</text> </view> </navigation>
总结
本文主要是写自定义导航基础的东西，重点在于怎么计算自定义导航的，具体的业务和样式还需要根据自身产品来设定。如有什么问题，欢迎提出一起学习。
到此这篇关于小程序自定义导航栏兼容适配所有机型（附完整案例）的文章就介绍到这了,更多相关小程序自定义导航栏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章: