自定义微信小程序导航栏NavigationBar

Lazy go

已于 2024-08-30 22:22:15 修改

阅读量554

点赞数

分类专栏：小程序文章标签：微信小程序 javascript 前端

于 2023-03-24 19:14:17 首次发布

Grvin M

本文链接：https://blog.csdn.net/weixin_45522160/article/details/129756720

版权

小程序专栏收录该内容

2 篇文章 0 订阅

订阅专栏

该文章介绍了如何在微信小程序中自定义NavigationBar，通过获取系统信息和菜单按钮的布局，计算出导航栏的高度、胶囊按钮的尺寸等，设置全局变量并在页面中使用这些数据来定制导航栏的样式和位置，实现防伪溯源的展示效果。

摘要由CSDN通过智能技术生成

自定义微信小程序NavigationBar

App.js

// app.js
App({
  onLaunch() {
     // 自定义头部
     let menuButtonObject = wx.getMenuButtonBoundingClientRect();
     wx.getSystemInfo({
       success: res => {
         // 导航高度
         let statusBarHeight = res.statusBarHeight,
           navTop = menuButtonObject.top,
           // 胶囊按钮与右侧的距离=windowWidth-right+胶囊宽度
           navObjWid = res.windowWidth - menuButtonObject.right + menuButtonObject.width,
           navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
         this.globalData.navHeight = navHeight;//导航栏总体高度
         this.globalData.navTop = navTop;//胶囊距离顶部距离
         this.globalData.navObj = menuButtonObject.height;//胶囊高度
         this.globalData.navObjWid = navObjWid;//胶囊宽度（包括右边距离)
         this.globalData.windowWidth = res.windowWidth;
         this.globalData.windowHeight = res.windowHeight;
       },
       fail(err) {
         console.log(err)
       }
     })

  },
  globalData: {
    navHeight: 0,
    navTop: 0,
    navObj: 0,
    navObjWid: 0,
    windowWidth: 0,
    windowHeight:0,
  }
})

page.js文件

var app =  getApp();
Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 导航栏高度
    navHeight: app.globalData.navHeight,
    // 导航栏距离顶部距离
    navTop: app.globalData.navTop,
    // 胶囊的高度
    navObj: app.globalData.navObj,
    // 胶囊宽度+距右距离
    navObjWid: app.globalData.navObjWid ,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    wx.setNavigationBarColor({
      frontColor:"#ffffff",
      backgroundColor:"#ffffff"
    })
  },
}

page.json文件

{
  "usingComponents": {},
  "navigationStyle": "custom",
}

page.wxml文件

<view class="header">
      <image src="https://w.wallhaven.cc/full/9d/wallhaven-9doq78.png" mode="aspectFill" class="header-bg" />
      <view style="height: {{navHeight*2}}rpx; ">
        <view style="height: {{navObj*2}}rpx; padding-top: {{navTop*2}}rpx; position: relative; width: 100%; text-align: center; line-height: {{navObj*2}}rpx; color: #ffffff; font-size: 28rpx;"  >
              防伪溯源 
        </view>
      </view>
</view>

page.wxss文件

page {
    width: 100%;
}
.header {
    width: 100%;
    position: relative;
    height: 2000rpx;
}
.header .header-bg{
  height: 100%;
  width: 100%; 
  position: absolute;
  left: 0;
  top: 0;
}