微信小程序自定义头部 navbar

陈龙龙的陈龙龙

已于 2024-07-09 14:45:09 修改

阅读量611

点赞数

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

于 2023-06-29 17:15:22 首次发布

本文链接：https://blog.csdn.net/weixin_72228920/article/details/131459896

版权

微信小程序同时被 2 个专栏收录

12 篇文章 2 订阅

订阅专栏

Vant

4 篇文章 0 订阅

订阅专栏

1.在 app.js 文件中

// app.js
App({
  onLaunch() {
    const that = this;
    // 获取系统信息
    const systemInfo = wx.getSystemInfoSync();
    // 胶囊按钮位置信息
    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
    // 导航栏高度 = 状态栏高度 + 44
    // (1) 手机端正常，pc端显示有问题
    that.globalData.navBarHeight = systemInfo.statusBarHeight + 44;
    // (2) 手机端，pc端都正常
    that.globalData.navBarHeight = systemInfo.statusBarHeight + menuButtonInfo.height + (menuButtonInfo.top - systemInfo.statusBarHeight) * 2;
    that.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
    that.globalData.menuTop = menuButtonInfo.top;
    that.globalData.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight;
    that.globalData.menuHeight = menuButtonInfo.height;
  },
  globalData: {
    navBarHeight: 0, // 导航栏高度
    menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）
    menuTop: 0, // 胶囊距上方间距
    menuBotton: 0, // 胶囊距底部间距（保持底部间距一致）
    menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
  },
});

整个复制进自己项目中去

2.在需要更改自定义 navbar 的 json 文件中修改配置

"navigationStyle": "custom"

3.在需要更改自定义 navbar 的 js 文件中修改配置

data: {
  navBarHeight: app.globalData.navBarHeight,
  menuRight: app.globalData.menuRight,
  menuBotton: app.globalData.menuBotton,
  menuTop: app.globalData.menuTop,
  menuHeight: app.globalData.menuHeight,
}

需要用到那个数据就写哪些，不需要全部都写

4.在需要更改自定义 navbar 的 wxml 文件中修改配置

<view class="top">
    <view class="navbar {{scrollTop>20?'scroll':''}}" style="height: {{  navBarHeight }}px;">
      <view class="navbar-tools" style="height: {{ menuHeight }}px; left:{{menuRight }}px; top:{{menuTop }}px;">
        <view class="search-container" style="border-radius: {{ menuHeight }}px;">
          <van-icon name="search" />
          <input class="searchIpt" type="search" placeholder="请输入搜索关键词" placeholder-style="color: #fff;" style="height: {{  menuHeight }}px;" />
        </view>
      </view>
    </view>
    <swiper class="" indicator-dots indicator-active-color="#1296DB" autoplay interval="2000" circular>
      <swiper-item class="">
        <image class="swiper-img" src="/static/images/swiper/1.jpg" />
      </swiper-item>
      <swiper-item class="">
        <image class="swiper-img" src="/static/images/swiper/2.jpg" />
      </swiper-item>
      <swiper-item class="">
        <image class="swiper-img" src="/static/images/swiper/3.jpg" />
      </swiper-item>
    </swiper>
</view>

这里要设置动态的宽高尺寸

5.在需要更改自定义 navbar 的 wxss 文件中修改配置

.top {
    position: relative;
    background-color: antiquewhite;

    .navbar {
      padding: 0 20rpx;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 80rpx;
      z-index: 9;
      box-sizing: border-box;

      .navbar-tools {
        position: absolute;

        .search-container {
          padding: 0 10rpx;
          display: flex;
          align-items: center;
          background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);

          .van-icon {
            margin-right: 10rpx;
            color: #fff;
            font-size: 40rpx;
          }

          .searchIpt {
            color: #fff;
            font-size: 28rpx;
          }
        }
      }
    }
  }