uniapp小步伐自定义头部(简单)

打印 上一主题 下一主题

主题 977|帖子 977|积分 2931

uniapp项目小步伐中难免会有一些页面必要自定义头部导航区域,由于原生的头部太大略了,本文记载下uniapp自定义小步伐的头部导航。
首先要把小步伐自带的头部去掉,在pages.json中把该页面的导航设置设为custom就可以了,添加下面这一行

  1. "navigationStyle": "custom"
复制代码

写本身的导航栏:
  1. <template>
  2.   <view class="content">
  3.     <view class="topNav">
  4.       <view class="nav-left">
  5.         耀南
  6.       </view>
  7.       <view class="nav-search">
  8.         <input type="text" placeholder="请搜索" placeholder-class="placClass" />
  9.       </view>
  10.     </view>
  11.   </view>
  12. </template>
  13. <script>
  14.   export default {
  15.     data() {
  16.       return {
  17.       }
  18.     },
  19.     methods: {
  20.     }
  21.   }
  22. </script>
  23. <style scoped>
  24.   .topNav {
  25.     height: 100rpx;
  26.     background-color: #00aa7f;
  27.     display: flex;
  28.     justify-content: flex-start;
  29.     align-items: center;
  30.     padding: 0 20rpx;
  31.     box-sizing: border-box;
  32.   }
  33.   .nav-left {
  34.     font-size: 36rpx;
  35.     font-weight: 600;
  36.     color: #ffeb3b;
  37.     margin-right: 30rpx;
  38.     font-style: italic;
  39.   }
  40.   .nav-search input {
  41.     width: 60%;
  42.     height: 62rpx;
  43.     border-radius: 30rpx;
  44.     padding-left: 25rpx;
  45.     background-color: #f0f8ffa6;
  46.     box-sizing: border-box;
  47.   }
  48.   .placClass {
  49.     font-size: 24rpx;
  50.     color: #fff;
  51.   }
  52. </style>
复制代码

由于原来自带的头部被去掉了,那么本身写的导航区域就会顶到最上面,以至于和手机的状态栏重叠,而且还显示不全,接下来就是重点

  • 怎样让本身写的导航栏避开手机的状态栏
  • 并且要与小步伐的胶囊按钮水平对齐
盼望的效果:

要完成这个效果你可能说直接用定位top值给他定下来不就可以了,但是这个top值是多少我们并不好把握,如果写一个固定的top值,那么就会造成一个问题,由于手机型号的不同,这个top值是不同的,所以就会在不同的手机上显示不一,无法做到统一。
精确做法:
必要通过uni.getSystemInfoSync获取到当前手机的状态栏区域的高度和手机型号,然后直接给页面设置一个padding-top,值就是状态栏区域的高度,这样就刚好避开手机状态栏
 然后怎样让本身写的导航栏与小步伐的胶囊按钮水平对齐,这个就必要盘算导航栏的高度了
导航栏高度 = 手机状态栏高度 + 40(ios)或44(安卓)
通过获取到的手机型号来判断,如果是ios就+40px,否则就+44px。

导航栏的高度有另一种盘算方式
导航栏高度 = 手机状态栏高度 + 胶囊按钮的高度 + 胶囊按钮上下边距
胶囊按钮的相关信息获取:
  1. const menuBtn = wx.getMenuButtonBoundingClientRect()
  2. console.log('胶囊按钮信息',menuBtn)
复制代码
终极效果:在不同的手机上都显示正常
到此,位置已经调解好,导航栏内里详细内容就可以随便写了,比方常见的左侧可能是个位置定位等...
完整源码

  1. <template>
  2.   <view class="content">
  3.     <!-- 距离顶部的距离 刚好留出状态栏即可 即statusBarHeight -->
  4.     <view class="topNav" :style="{height:navHeight+'px',paddingTop:statusBarHeight+'px'}">
  5.       <view class="nav-left">
  6.         耀南
  7.       </view>
  8.       <view class="nav-search">
  9.         <input type="text" placeholder="请搜索" placeholder-class="placClass" />
  10.       </view>
  11.     </view>
  12.   </view>
  13. </template>
  14. <script>
  15.   export default {
  16.     data() {
  17.       return {
  18.         navHeight: "", // 导航栏高度
  19.         statusBarHeight: '', // 状态栏高度
  20.       }
  21.     },
  22.     onLoad() {
  23.       //获取手机系统的信息 里面有状态栏高度和设备型号
  24.       let {
  25.         statusBarHeight,
  26.         system
  27.       } = uni.getSystemInfoSync()
  28.       // 注意返回的单位是px 不是rpx
  29.       console.log('状态栏高度是', statusBarHeight + 'px', '设备型号是', system);
  30.       this.statusBarHeight = statusBarHeight
  31.       // 而导航栏的高度则 = 状态栏的高度 + 判断机型的值(是ios就+40,否则+44)
  32.       // 这个高度刚好和胶囊对齐
  33.       this.navHeight = statusBarHeight + (system.indexOf('iOS') > -1 ? 40 : 44)
  34.       console.log(this.navHeight, "导航栏高度");
  35.     },
  36.     methods: {
  37.     }
  38.   }
  39. </script>
  40. <style scoped>
  41.   .topNav {
  42.     height: 100rpx;
  43.     background-color: #00aa7f;
  44.     display: flex;
  45.     justify-content: flex-start;
  46.     align-items: center;
  47.     padding: 0 20rpx;
  48.     box-sizing: border-box;
  49.   }
  50.   .nav-left {
  51.     font-size: 36rpx;
  52.     font-weight: 600;
  53.     color: #ffeb3b;
  54.     margin-right: 30rpx;
  55.     font-style: italic;
  56.   }
  57.   .nav-search input {
  58.     width: 60%;
  59.     height: 62rpx;
  60.     border-radius: 30rpx;
  61.     padding-left: 25rpx;
  62.     background-color: #f0f8ffa6;
  63.     box-sizing: border-box;
  64.   }
  65.   .placClass {
  66.     font-size: 24rpx;
  67.     color: #fff;
  68.   }
  69. </style>
复制代码


免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

立聪堂德州十三局店

金牌会员
这个人很懒什么都没写!
快速回复 返回顶部 返回列表