uni-app小程序获取自定义导航高和胶囊按钮定位的两个api

1.  
   // 获取自定义导航的高
2.  
   uni.getSystemInfo({
3.  
   success: res => {
4.  
   this.topHeight = res.statusBarHeight
5.  
   }
6.  
   })
7.  
   console.log(this.topHeight);

 在小程序平台，如果原生导航栏被隐藏，仍然在右上角会有一个悬浮按钮，微信下也被称为胶囊按钮。本API用于获取小程序下该菜单按钮的布局位置信息，方便开发者布局顶部内容时避开该按钮。

1.  
   //获取胶囊按钮
2.  
    
3.  
   let menuButtonInfo = uni.getMenuButtonBoundingClientRect()

下面来尝试一下： 

 代码如下：【注释中为获取自定义导航的api】

1.  
   export default {
2.  
   components: {
3.  
   bottomIcon
4.  
   },
5.  
   data() {
6.  
   return {
7.  
   titleheight: 0,
8.  
   titletop:0,
9.  
   }
10.  
    },
11.  
    onLoad() {
12.  
    // 获取自定义导航的高
13.  
    // uni.getSystemInfo({
14.  
    // success: res => {
15.  
    // this.topHeight = res.statusBarHeight
16.  
    // }
17.  
    // }),
18.  
    this.getHeight();
19.  
    // console.log("topHeight的值", this.topHeight);
20.  
     
21.  
    },
22.  
    methods: {
23.  
    getHeight() {
24.  
    let res = uni.getMenuButtonBoundingClientRect();
25.  
    this.titletop = res.top;
26.  
    this.titleheight = res.height
27.  
    console.log(res);
28.  
    console.log("titletop的值", this.titletop);
29.  
    console.log("titleheight的值", this.titleheight);
30.  
    console.log("一半的titleheight的值", this.titleheight/2);
31.  
    }
32.  
     
33.  
    }
34.  
    }
35.  
    </script>

在onLoad中调用一下this.getHeight();这个方法，得到返回值胶囊按钮距离顶部的top值以及自身的宽高，就可以用来自定义自己的导航栏，实现不同机型的兼容性。

1.  
   //定义一下这个盒子的距离顶部的top值等于胶囊按钮的top
2.  
    
3.  
   // 所以会在各个机型都保持与胶囊按钮在同一水平线
4.  
    
5.  
   // 这里使用 v-bind 并没有使用插值语法{{titletop}}
6.  
    
7.  
   <view class="back" :style="'top:' titletop 'px'">
8.  
    
9.  
   </view>
10.  
     
11.  
     
12.  
    .back{
13.  
    position: absolute;//不写定位应该top不生效，可以自行试一下
14.  
    }

 还是挺有趣的。

如果是需要计算【顶部距离 胶囊按钮的高 底部空出间距】

1.  
   <view class="top_view" :style="'margin-top:' (titletop titleheight 10) 'px'" >
2.  
    
3.  
   </view>

放一张图就明白了：1、2、3分别对应 titletop 、  titleheigh  、  10

这样写出来兼容度较高。

自己复制粘贴用：

1.  
   // view中 （添加此标签后 最上边的盒子正好与胶囊按钮平齐，可以加一个PX值让它向下移动距离）
2.  
    
3.  
   :style="'margin-top:' (titletop titleheight 10) 'px'"
4.  
    
5.  
    
6.  
   // data return中
7.  
    
8.  
   titleheight: 0,
9.  
   titletop:0,
10.  
     
11.  
     
12.  
    // OnLoad中
13.  
     
14.  
    this.getHeight();
15.  
     
16.  
    //methods中
17.  
     
18.  
     
19.  
     
20.  
    getHeight() {
21.  
    let res = uni.getMenuButtonBoundingClientRect();
22.  
    this.titletop = res.top;
23.  
    this.titleheight = res.height
24.  
    }

也可以简单封装一下：放入全局app.vue中：

1.  
   <!-- 全局 -->
2.  
    
3.  
   <script>
4.  
   export default {
5.  
   globalData() {
6.  
   return {
7.  
   titleheight: 0,
8.  
   titletop: 0,
9.  
   }
10.  
    },
11.  
    onLaunch: function() {
12.  
     
13.  
     
14.  
    },
15.  
    onLoad: function() {
16.  
     
17.  
    },
18.  
    onShow: function() {
19.  
    console.log('App Show')
20.  
    },
21.  
    onHide: function() {
22.  
    console.log('App Hide')
23.  
    },
24.  
    methods: {
25.  
    getHeight() {
26.  
    let res = uni.getMenuButtonBoundingClientRect();
27.  
    this.titletop = res.top;
28.  
    this.titleheight = res.height
29.  
    },
30.  
    },
31.  
     
32.  
    }
33.  
    </script>
34.  
     
35.  
    <style>
36.  
    /*每个页面公共css */
37.  
    </style>

在需要的地方直接引入就行：【封装的并不好，暂且先用着。可以少写一个getHeight()方法】

1.  
   <template>
2.  
    
3.  
   <view> </view>
4.  
    
5.  
   </template>
6.  
    
7.  
   <script>
8.  
   export default {
9.  
   data(){
10.  
     
11.  
    return{
12.  
    titleheight:0,
13.  
    titletop:0
14.  
    }
15.  
    },
16.  
     
17.  
    onLoad() {
18.  
     
19.  
    //通过全局vue得到getHeight()
20.  
    getApp().getHeight();
21.  
    this.titleheight = getApp().titleheight;
22.  
    this.titletop = getApp().titletop;
23.  
    },
24.  
     
25.  
    methods: {
26.  
     
27.  
    }

这篇好文章是转载于：学新通技术网