封装微信小程序顶部导航栏，自适应各种手机屏幕

小刘记事

已于 2024-09-13 10:53:53 修改

阅读量935

点赞数 1

CC 4.0 BY-SA版权

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

于 2020-12-30 17:39:04 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_50147372/article/details/111994628

微信小程序专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何封装微信小程序的顶部导航栏，实现iOS设备标题居中，Android设备标题左对齐。通过在page.json配置和app.js设置全局高度，创建自定义导航栏组件navigation，并在全局数据globalData中定义，确保在不同手机屏幕上良好显示。

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

已更新！！
根据当前需求封装的，ios标题居中，安卓上靠左，可能有点垃圾，希望给位指正
首先要在封装的page.json文件下写入:

"navigationStyle":"custom",

在app.js中定义全局获取顶部高度

创建导航栏组件navigation（名字自定义）

// 获取屏幕参数
    try {
      const res = wx.getSystemInfoSync()
      if (res.platform == 'ios') {
        _this.globalData.platform = 'ios'
      } else if (res.platform == 'android') {
        _this.globalData.platform = 'android'
      }
      let navHeight = res.statusBarHeight
      _this.globalData.screenWidth = res.screenWidth
      _this.globalData.screenHeight = res.screenHeight
      _this.globalData.statusBarHeight = res.statusBarHeight
      _this.globalData.pixelRatio = res.pixelRatio
      _this.globalData.winWidth = res.windowWidth
      if (res.system.indexOf('Android') !== -1) {
        _this.globalData.navHeight = navHeight + 14 + 32
        _this.globalData.navTitleTop = navHeight + 8
        _this.globalData.winHeight = res.screenHeight - navHeight - 14 - 32
        _this.globalData.winHeightTab = res.windowHeight - navHeight - 14 - 32
      } else {
        _this.globalData.navHeight = navHeight + 12 + 32
        _this.globalData.navTitleTop = navHeight + 4
        _this.globalData.winHeight = res.screenHeight - navHeight - 12 - 32
        _this.globalData.winHeightTab = res.windowHeight - navHeight - 12 - 32
      }
      // console.log(wx.getSystemInfoSync(), _this.globalData.winHeightTab)
    } catch (e) {
      // console.log(e)
    }

在globalData中定义

 globalData: {
    navHeight: 64, //手机顶部高度
    navTitleTop: 26,//手机顶部top值
    platform: 'ios',//手机型号
 }

navigate组件中的内容

<view>
  <view class="nav-bar {{isWhite=='true'?'nav-bar-white':''}}"
    style="height: {{navHeight}}px;background-color:{{navColor}};" catchtap="toTop">
  <text class="navbar-title"
      style="top:{{navTitleTop}}px;color:{{navTitleColor}};{{phoneType == 'android' ? 'width:auto;text-algin:left;left:9%;':'font-weight:bolder;'}}">{{title}}</text>
    <view wx:if="{{returnStatus}}" catchtap="returnClick"
      class="navbar-icon-wrap" style="top:{{navTitleTop}}px;" data-returnstatus="{{returnStatus}}"
      data-pageStack="{{pageStack}}" data-returnStatusContent="{{returnStatusContent}}" data-special="{{special}}">
      <image class="navbar-icon" src="../../assets/images/return.png" mode="widthFix"></image>
    </view>
  </view>
</view>

/* component/navigateion/navigateion.wxss */
.box {
  height: 178rpx;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 28rpx 19rpx;
  box-sizing: border-box;
  font-size: 30rpx;
  /* padding-bottom: 18rpx; */
  position: relative;
  background: #fff;
}

.box-imagebox {
  position: absolute;
  left: 6rpx;
  bottom: 25rpx;
  width: 100rpx;
  height: 100rpx;
  /* background-color: red; */
}

.box image {
  width: 32rpx;
  /* height: 42rpx; */
  position: absolute;
  left: 6px;
  bottom: 7rpx;
}

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999999;
}

.nav-bar-white {
  background-color: #fff;
}

.navbar-title {
  position: absolute;
  height: 64rpx;
  line-height: 64rpx;
  /* width: 100%; */
  width: 320rpx;
  text-align: center;

  font-size: 32rpx;
  color: #000;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  left: 28%;
}

.navbar-icon-wrap {
  position: absolute;
  left: 3px;
  width: 70rpx;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navbar-icon {
  width: 16px;
  height: 32rpx;
}

.navbar-scan {
  width: 28px;
  height: 28px;
}

const app = getApp()
Component({
  properties: {
    // 标题
    title: {
      type: String,
      value: ''
    }, 
    // 发起页面路径
    pageStack: {
      type: String,
      value: ''
    },
    returnStatus: {
      type: String,
      value: ''
    },
    returnStatusContent: {
      type: String,
      value: ''
    },
    special: {
      type: String,
      value: ''
    },
    navHeight: {
      type: Number,
      value: 20
    },
    navTitleTop: {
      type: Number,
      value: 26
    },
    navTitleColor: { // 导航标题颜色 默认黑色
      type: String,
      value: '#000'
    },
    isWhite: { // 是否为白底
      type: String,
      value: 'true'
    },
 }
 data: {
    navHeight: 0,
    navTitleTop: 0,
    phoneType: app.globalData.platform,
  },
 attached() {
    // 在组件实例进入页面节点树时执行
    // 获取顶部导航高度
    this.setData({
      navHeight: app.globalData.navHeight,
      navTitleTop: app.globalData.navTitleTop,
      phoneType: app.globalData.platform,
    })
  },
})

使用页面中的page.json

"usingComponents": {
 
    "navigateion-bar" : "../../../component/navigateion/navigateion"

  },

使用页面的page.wxml

<navigateion-bar title='添加银行卡' pageStack="{{pageStack}}" returnStatus="true"/>