【Uni-app‘解决搜索框与导航栏胶囊自适应对齐‘】

<template>
  <view>
    <!-- 创建一个空元素 -->
    <view :style="{height:top+'px'}">
    </view>
    <!-- 添加搜索框元素 -->
    <view class="searchAll">
      <uni-icons type="left" style="font-size: 20px;"></uni-icons>
      <view class="search" :style="{height:pillheight+'px'}">
        <uni-search-bar :radius="100" @confirm="search"></uni-search-bar>
      </view>
    </view>
</template>

简单看一下页面布局，最上方是一个空盒子，下面的盒子用来盛放搜索框以及图标

先从data里面设置一下默认的高度和宽度，然后使用uni.getSystemInfoSync的API获取顶部状态栏的高度

// 状态栏高度
       capsuleHeight: 20,
       navBarHeight: 45,
       // 可视区域高度
       windowWidth: 375,
       // 胶囊高度
       pillheight:0,
       top: 0,
       val: ''

uni.getMenuButtonBoundingClientRect获取胶囊的高度和顶部的距离，然后将搜索框的宽高和顶部的距离绑定到胶囊的对应属性上

具体代码如下

<template>
  <view>
    <!-- 创建一个空元素 -->
    <view :style="{height:top+'px'}">
    </view>
    <!-- 添加搜索框元素 -->
    <view class="searchAll">
      <uni-icons type="left" style="font-size: 20px;"></uni-icons>
      <view class="search" :style="{height:pillheight+'px'}">
        <uni-search-bar :radius="100" @confirm="search"></uni-search-bar>
      </view>
    </view>

</template>

<script>

  export default {

data(){

return {

// 状态栏高度
       capsuleHeight: 20,
       navBarHeight: 45,
       // 可视区域高度
       windowWidth: 375,
       // 胶囊高度
       pillheight:0,
       top: 0,
       val: ''

}

}

onLoad() {
      const info = uni.getSystemInfoSync()
      const a = uni.getMenuButtonBoundingClientRect()
      this.top = a.top 
      // console.log(info);
      console.log(a);
      this.pillheight = a.height
      this.capsuleHeight = info.statusBarHeight
      console.log(this.capsuleHeight);
      this.windowWidth = info.windowWidth
      // #ifndef H5 || APP-PLUS || MP-ALIPAY
      const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
      this.windowWidth = menuButtonInfo.left
      // #endif
    }

}

</script>

<style>

  .searchAll {
    margin-left: 16px;
    display: flex;
    justify-content: start;
    .search {
      margin-left: 16px;
      text-align: center;
      line-height: 100%;
      width: 50%;
      border: 1px solid #CCCCCC;
      border-radius: 50px;
    }
  }

</style>