微信小程序自定义导航（兼容）

最新推荐文章于 2024-05-20 16:43:18 发布

你管我管你疯啊

最新推荐文章于 2024-05-20 16:43:18 发布

阅读量108

点赞数

分类专栏：微信小程序-知识总结

本文链接：https://blog.csdn.net/weixin_45527865/article/details/117767424

版权

微信小程序-知识总结专栏收录该内容

47 篇文章 2 订阅

订阅专栏

在这里插入图片描述

页面布局及样式

<!-- 导航栏高度 -->
<view class="header-box">
 <view style="height:{{statusBarHeight}}px;"></view>
 <view class="header2-box" style="height:{{navigationBarHeight}}px;">
   <view class="item left-box">
     <text>12</text>
     <text>|</text>
     <text>56</text>
   </view>
   <view class="item title">中中间中间中间间</view>
   <view class="item"></view>
 </view>
</view>
<!-- 导航栏高度 -->
<!-- 内容区域 -->
<view style="padding-top:{{statusBarHeight+navigationBarHeight}}px;">
 <view>123123</view>
 <view>123123</view>
 <view>123123</view>
 <view>123123</view>
 <view>123123</view>
 <view class="share-btn">
   分享
 </view>
 <view>123123</view>
 <view>123123</view>
 <view>123123</view>
 <view>123123</view>
 <view>123123</view>
 <view>123123</view>
 <view>123123</view>
 <view>123123</view>
 <view>123123</view>
 <view>123123</view>
 <view>123123</view>
 <view>123123</view>
 <view>123123</view>
 <view>123123</view>
 <view>123123</view>
 <view>123123</view>
 <view>123123</view>
 <view>123123</view>
 <view>123123</view>
 <view>123123</view>
 <view>123123</view>
 <view>123123</view>
 <view>123123</view>
 <view>123123</view>
</view>
<!-- 内容区域 -->

// 样式区域
/* 动画样式 */
.share-btn{
 text-align: center;
 line-height: 100rpx;
 width: 300rpx;
 height: 100rpx;
 margin: 0 auto;
 color: #ffffff;
 border-radius: 50rpx;
 background-color: #ED774A;
 animation: wave 2.5s ease-in-out infinite;
}

@keyframes wave {
 0% {
   transform: scale(1);
 }

 25% {
   transform: scale(1.05);
 }

 50% {
   transform: scale(1);
 }

 75% {
   transform: scale(1.05);
 }
}

/* 导航栏样式 */
.header-box{
 position: fixed;
 top: 0;
 width: 100%;
 background-color: #2d59DF;
 
}
.left-box{
 display: flex;
 align-items: center;
 justify-content:space-around;
}
.header2-box{
 display: flex;
 align-items: center;
 justify-content:space-between;
 padding: 0 20rpx;
 box-sizing: border-box;
 color: #ffffff;
}
.item{
 width:85px;
 height: 30px;
 line-height: 30px;
 text-align: center;
}
.left-box{
 border: 1px solid #ffffff;
 border-radius: 50rpx;
}
.title{
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

逻辑处理

// 1. 获取状态栏高度
  let sysInfo = wx.getSystemInfoSync();
  // 2. 获取胶囊的具体信息
  let menuInfo = wx.getMenuButtonBoundingClientRect();
  // 3. 状态栏高度和胶囊的位置导航栏高度根据计算
  let navigationBarHeight = (menuInfo.top - sysInfo.statusBarHeight) * 2 + menuInfo.height;
  this.setData({
    navigationBarHeight: navigationBarHeight,  //导航栏高度
    statusBarHeight: sysInfo.statusBarHeight   //状态栏高度
  })