微信小程序之沉浸式导航

首先看效果

欢迎大佬前来点评

第一步：在当前 .json( 点json) 文件中粘贴   "navigationStyle": "custom"

{
  "usingComponents": {},
  "navigationStyle": "custom"
}

这一步就是把自带的导航栏去掉

第二步：分别粘贴

WXML

<view class="indexa">
  <view class='nav' style="height:{{customBar}}px">
    <view class='con' style="height:{{customBar}}px;padding-top:{{statusBar}}px;">
      <view class="searchBtn" bindtap="search">
        <i class="iconfont icon-sousuo"></i>
      </view>
      <view class="title" style="top:{{statusBar}}px">首页</view>
    </view>
  </view>
</view>

JS

const app = getApp();
Page({
  data: {
    statusBar: app.globalData.statusBar,
    customBar: app.globalData.customBar,
    custom: app.globalData.custom
  },

LESS(预处理)

// 引入字体图标
@import "../../utils/iconfont/iconfont.wxss";
view, scroll-view, swiper, button, input, textarea, label, navigator, image {
  box-sizing: border-box;
}
.indexa {
  .nav {
    min-height: 0px;
    background: #d20000;
    color: #fff;
    z-index: 9999;
    position: relative;
    .con {
      position: fixed;
      width: 100%;
      top: 0;
      display: flex;
      .searchBtn {
        margin-left: 30rpx;
        font-size: 36rpx;
        display: flex;
        align-items: center;
        height: 100%;
        justify-content: center;
        max-width: 100%;
      }
      .title {
        position: absolute;
        text-align: center;
        width: calc(100% - 340rpx);
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
        height: 60rpx;
        font-size: 32rpx;
        line-height: 60rpx;
        pointer-events: none;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    }
  }
}

App.js中

    // 获取系统信息
    wx.getSystemInfo({
      success: e => {
        this.globalData.statusBar = e.statusBarHeight; //状态栏高度
        let custom = wx.getMenuButtonBoundingClientRect(); //菜单按钮
        this.globalData.custom = custom;
        this.globalData.customBar = custom.bottom + custom.top - e.statusBarHeight;
        //计算得到定义的状态栏高度
      }
    })

 这样微信小程序——沉浸式导航就做好了