微信小程序自定义导航栏navigationBar（搜索框）

最新推荐文章于 2024-06-08 14:27:41 发布

结构体&

最新推荐文章于 2024-06-08 14:27:41 发布

阅读量1.2k

点赞数 1

分类专栏： uniapp

本文链接：https://blog.youkuaiyun.com/LIXIAONA_1101/article/details/114878021

版权

本文介绍了如何在微信小程序中实现自定义导航栏，包括获取状态栏高度、菜单按钮高度，并根据平台差异设置导航栏高度。通过动态设置样式，创建包含搜索框的导航栏，并展示了相应的vue数据和wxml结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简摘：

app.vue的onLaunch()

   // 设置自定义导航start
           const {
               statusBarHeight,
               platform
           } = uni.getSystemInfoSync()
           const {
               top,
               height
           } = uni.getMenuButtonBoundingClientRect()

           // 状态栏高度
           uni.setStorageSync('statusBarHeight', statusBarHeight)
           // 胶囊按钮高度一般是32 如果获取不到就使用32
           uni.setStorageSync('menuButtonHeight', height ? height : 32)

           // 判断胶囊按钮信息是否成功获取
           if (top && top !== 0 && height && height !== 0) {
               const navigationBarHeight = (top - statusBarHeight) * 2 + height
               // 导航栏高度
               uni.setStorageSync('navigationBarHeight', navigationB