.nav-bar{ position: fixed; width: 100%; top: 0; color: #fff; background: #000;} .nav-bar .search{ width: 60%; color: #333; font-size: 14px; background: #fff; position: absolute; border-radius: 50px; background: #ddd; padding-left: 14px;}
以下是调用页面的代码，也就是引用组件的页面： /pages/index/index.wxml
navigation-bar default-data="{{defaultData}}"></navigation-bar>
/pages/index/index.json
{ "usingComponents": { "navigation-bar": "/components/navigation-bar/navigation-bar" } }
/pages/index/index.js
const app = getApp(); Page({ data: { // 组件参数设置，传递到组件 defaultData: { title: "我的主页", // 导航栏标题 } }, onLoad() { console.log(this.data.height) } })
效果图：
好了，以上就是全部代码了，大家可以文中复制代码，也可以 【下载源码】
，直接到开发者工具里运行，记得appid用自己的或者测试哦！
下面附几张其它小程序的效果图，大家也可以尝试照着做：
总结
本文写了自定义navigationBar的一些基础性东西，里面涉及组件用法、参数传递、导航栏相关。
由于测试环境有限，大家在使用时如果发现有什么问题，希望及时反馈，以供及时更新帮助更多的人！
到此这篇关于微信小程序自定义navigationBar顶部导航栏适配所有机型（附完整案例）的文章就介绍到这了,更多相关小程序navigationBar顶部导航栏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章: