小程序自定义导航搜索框

需求分析

顶部状态栏太高了，需要去掉原先的状态栏。 自定义导航栏

效果

先去掉原生顶部

数据初始化

data() {
    return {
      statusBarHeight: 20,
      navBarHeight: 45,
      windowWidth: 375
    };
  },

<view class="navbar">
    <!-- 固定站位 -->
    <view class="navbar-fixed">
      <!-- 状态栏 -->
      <view :style="{height:statusBarHeight + 'px'}"></view>
      <view class="navbar-content" :style="{width: windowWidth+ 'px', height: navBarHeight+ 'px'}">
        <view class="navbar-search">
          <view class="navbar-search_icon">
			  <uni-icons type="search"></uni-icons>
		  </view>
          <input
            class="navbar-search_text"
            type="text"
            placeholder="请输入您要搜索的内容"
            @input="inputChange"
          />
        </view>
      </view>
    </view>
    <!-- 固定站位,防止数据多，  将数据遮盖住 -->
      <view :style="{height: statusBarHeight+navBarHeight + 'px'}"></view>
  </view>

created() {
    // 获取设备信息
    const info = uni.getSystemInfoSync();
    console.log(info);
    // 设置状态栏高度
    this.statusBarHeight = info.statusBarHeight;
    // 获取胶囊的位置
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    console.log(menuButtonInfo);
    this.navBarHeight = （menuButtonInfo.bottom - info.statusBarHeight） +(menuButtonInfo.top - info.statusBarHeight);
      this.windowWidth = menuButtonInfo.left
  }

其他应用

当你第一次进入小程序，不是都有个添加至我的小程序。那这个就得判断手机顶部的高度，用这个也可以