小程序自带的关闭按钮距离顶部的距离（设置按钮与其对齐）

1.情景

很多时候，需要使轮播在顶部，并且占有更多的视图区，就需要去掉导航栏，在轮播上加一个浮动的返回按钮，为了好看，就需要使得自定义按钮跟自带的关闭按钮对齐

2.官方api

Object wx.getMenuButtonBoundingClientRect()
基础库 2.1.0 开始支持，低版本需做兼容处理。

获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。

返回值
Object
菜单按钮的布局位置信息

属性 类型 说明
width number 宽度，单位：px
height number 高度，单位：px
top number 上边界坐标，单位：px
right number 右边界坐标，单位：px
bottom number 下边界坐标，单位：px
left number 左边界坐标，单位：px

3.方案

给按钮设置一个动态的top值，值和获取的关闭按钮的top一致，注意在onShow钩子中获取和设置。

<template>
  <view class="listAwards-areas">
    <view>
      <u-image mode="widthFix" :src="srcImg" :border-radius="10"></u-image>
      <img
        @click="routerTohome" :style="{top:iconTop}"
        class="search-icon"
        src="../../static/home/right-btn2.png"
      />
    </view>
  </view>
</template>

<script>
export default {
  name: "listAwards",
  data() {
    return {
       iconTop: "",// 搜索icon距离顶部的距离
      current: null,
      awardsList: [],
      srcImg: "",
    };
  },
  onLoad(option) {
    this.current = option.current;
  },
  onShow() {
    this.getMyInfo();
    this.iconTop = wx.getMenuButtonBoundingClientRect().top+"px"   //获取关闭按钮的高度
  },

  methods: {
    routerTohome() {
      uni.navigateTo({
        url: `/pages/index/index`,
      });
    },
    getMyInfo() {
  },
};
</script>

<style lang="scss">
.listAwards-areas {
  .nav-top {
    text-align: center;
  }
  .search-icon {
    position: absolute;
    top: 100rpx;
    left: 28rpx;
    width: 65rpx;
    height: 65rpx;
  }
}
</style>

4.效果