【微信小程序】微信小程序自定义导航栏。（主要针对单个页面复杂导航栏）

多多~益善

已于 2024-05-22 10:38:12 修改

阅读量76

点赞数 1

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

于 2022-08-02 15:14:45 首次发布

本文链接：https://blog.csdn.net/weixin_51062083/article/details/126122415

版权

小程序专栏收录该内容

2 篇文章 0 订阅

订阅专栏

第一步：进入小程序先计算高度。

onLaunch() {
  this.setNavSize()
},
// 通过获取系统信息计算导航栏高度
setNavSize: function () {
    var that = this
      , sysinfo = wx.getSystemInfoSync()
      , statusHeight = sysinfo.statusBarHeight
      , isiOS = sysinfo.system.indexOf('iOS') > -1
      , navHeight;
    if (!isiOS) {
      navHeight = 48;
    } else {
      navHeight = 44;
    }
    this.globalData.statusHeight = statusHeight
    this.globalData.navHeight = navHeight

  },
globalData: {
    screenHeight: wx.getSystemInfoSync().windowHeight,
    statusHeight:'',
    navHeight:'',
    //胶囊尺寸
    MenuButtonBounding_bottom:wx.getMenuButtonBoundingClientRect().bottom,
    MenuButtonBounding_height:wx.getMenuButtonBoundingClientRect().height,
    MenuButtonBounding_left:wx.getMenuButtonBoundingClientRect().left,
    MenuButtonBounding_right:wx.getMenuButtonBoundingClientRect().right,
    MenuButtonBounding_top:wx.getMenuButtonBoundingClientRect().top,
    MenuButtonBounding_width:wx.getMenuButtonBoundingClientRect().width,
  }

第二步：

a.页面js调用。

  data: {
    screenHeight:getApp().globalData.screenHeight,
    statusHeight:getApp().globalData.statusHeight,
    navHeight:getApp().globalData.navHeight,
    MenuButtonBounding_width:getApp().globalData.MenuButtonBounding_width,
    MenuButtonBounding_height:getApp().globalData.MenuButtonBounding_height,
    MenuButtonBounding_top:getApp().globalData.MenuButtonBounding_top,
  },

b.页面json配置（usingComponents引用的是vant2组件，这里是为了更好制作导航栏。引入组件见其他文章）。

{
  "usingComponents": {
    "van-popup": "@vant/weapp/popup/index"
  },
  "navigationStyle":"custom"
}

c.页面view视图（导航栏图标内容自行更改）。

<!-- 导航栏 -->
  <view style="height: {{statusHeight}}px;background-color: #3d5c6e;"></view>
  <view style="height: {{navHeight}}px;background-color: #3d5c6e;">
    <van-icon name="apps-o" slot="left" style="margin-left: 30rpx;margin-top: {{navHeight/5}}px;" color="#fff" size="{{MenuButtonBounding_height/1.3}}px" catchtap="comeBackHome" />
    <image src="data:image/png;base64,{{res_user.image_128}}" style="width: {{MenuButtonBounding_height/1.3}}px;height: {{MenuButtonBounding_height/1.3}}px;position: absolute;right: 0;margin-right: {{MenuButtonBounding_width+15}}px;margin-top: {{navHeight/5}}px;border-radius: 50%;" catchtap="comeBackLogin"  mode="scaleToFill"/>
  </view>