小程序自定义导航搜索框

以你之姓@ 2021-09-01 06:06 473阅读 0赞

### 需求分析 ###

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

### 效果 ###

![在这里插入图片描述][20200822145137982.png_pic_center]

### 先去掉原生顶部 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center]

### 数据初始化 ###

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

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
      }

### 其他应用 ###

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

[20200822145137982.png_pic_center]: /images/20210813/f5df540eb4a64414b271bfc148314881.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center]: /images/20210813/b1f59f7b82a84885b63852eadf0d7749.png