uniapp开发微信小程序自定义顶部导航栏

侒然

已于 2023-04-03 14:29:15 修改

阅读量868

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序文章标签： uni-app javascript 前端

于 2023-03-31 17:28:53 首次发布

本文链接：https://blog.csdn.net/Janent168/article/details/129885120

小程序专栏收录该内容

10 篇文章

订阅专栏

文章讲述了在小程序中如何进行自定义导航栏高度的计算，以保持其固定在头部。通过获取系统状态栏高度和菜单按钮的布局信息，计算出导航栏和状态栏的总高度，从而实现全屏页面下导航栏的正确显示。同时，代码示例展示了如何处理胶囊位置信息和内容区域的顶部margin。

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

⼩程序⾃定义导航栏⾼度计算
⾃定义导航栏后页⾯就成了全屏状态，如果还要⾃定义导航栏，那么就需要重新计算导航栏的⾼度，让其⼀直 fixed 在头部。

    <!-- 自定义导航栏 -->
    <view class="top_scroll">
      <view class="nav" :style="topx">
        <!-- 自定义导航栏 -->
        <view class="status_bar" :style="{ height: statusBarHeight + 'px' }">
          <!-- uni-ui这里是状态栏 -->
        </view>
        <!-- 胶囊位置信息 -->
        <view
          class="nav_content"
          :style="{height:navBarHeight+'px;line-height:'+navBarHeight+'px'}"
        >
          <view class="nav_left" @click="selectCity">
            <text v-if="currentCity.districtCode > 0">{{
              currentCity.district
            }}</text>
            <text v-else-if="currentCity.cityCode > 0">{{
              currentCity.city
            }}</text>
            <text v-else-if="currentCity.provinceCode > 0">{{
              currentCity.province
            }}</text>
            <text v-else>暂无 </text>
            <image
              class="top3xia"
              src="../../static/arrow_down.png"
              mode="widthFix"
            ></image>
          </view>
          <view class="nav_title">{{title}} </view>
        </view>
      </view>
    </view>

  //第一次加载时调用
  created() {
    if (wx.canIUse("getMenuButtonBoundingClientRect")) {
      let sysInfo = wx.getSystemInfoSync(); //状态栏的高度
      console.log("sysInfo", sysInfo);
	  // 获取状态栏高度
      this.statusBarHeight = sysInfo.statusBarHeight;
      // 胶囊位置信息
      let rect = wx.getMenuButtonBoundingClientRect();
      this.menuButtonRect = JSON.parse(JSON.stringify(rect));
      // 导航栏高度
      let navBarHeight = (rect.top - sysInfo.statusBarHeight) * 2 + rect.height;
      this.navBarHeight = navBarHeight;
      // 自定义导航栏的高度
      this.height = sysInfo.statusBarHeight + navBarHeight;
      // 计算状态栏与导航栏的总高度
      var customBar = this.navBarHeight+this.statusBarHeight
      this.topx = "height:" + customBar + "px";
   
      // 底部排除自定义导航的高度
      const Bottom = (sysInfo.screenHeight - sysInfo.safeArea.bottom) * 2 + 120;
      const marTop = customBar + 5;
      this.marginTop = "margin-top:" + marTop + "px;display: inline-block;";
      this.paddingBottom = "padding-bottom: " + Bottom + "rpx";
    } else {
      wx.showToast({
        title: "您的微信版本过低，界面可能会显示不正常",
        icon: "none",
        duration: 4000,
      });
    }
  },

.top_scroll {
  position: fixed;
  width: 100%;
  z-index: 10000;
}

.nav {
  /* background-color: blue; */
  background-image: linear-gradient(
    180deg,
    rgba(87, 149, 248, 1),
    rgba(179, 211, 254, 1)
  );
  min-height: 50rpx;
  position: relative;

  .nav_content {
    position: relative;
    // border: solid 1px #f00;

    .nav_title {
      position: absolute;
      bottom: 0;
      width: 100%;
      text-align: center;
      // height: 80rpx;
      // line-height: 80rpx;
      font-size: 30rpx;
      font-weight: 1000;
      color: #fff;
    }

    .nav_left {
      position: absolute;
      bottom: 0;
      width: 25%;
      z-index: 10;
      color: #fff;
      left: 20rpx;
      text-align: left;
      font-size: 30rpx;
    }

    .top3xia {
      width: 20rpx;
      margin-left: 12rpx;
    }
  }
}