由于之前的代码失效了现在更新一下！！！
由于我的开发环境是uni-app所以一下代码是uni-app的开发代码，不过小程序也是同理的，本人在我的原生小程序页同样实现了
参考资料
getMenuButtonBoundingClientRect()
小程序文档：getMenuButtonBoundingClientRect()
uni-app文档：getMenuButtonBoundingClientRect()
在单页面关闭默认的导航栏
"navigationStyle": "custom"
官方获取的参数是
官方参数
参数详解
详解
实现原理
用一个view，padding-top=top;height=height;padding-bottom=给一个自己喜欢的数值+rpx
实现的代码
<template>
<view class="prohibition">
<view class="demo" :style="'height:' + demo.height + 'px;' + 'padding-top:' + demo.top + 'px;padding-bottom:10rpx'">
<view class="left" :style="'top:' + demo.top + 'px'">
<view class="iconfont icon-xiaoxi"></view>
</view>
测试辣
</view>
</view>
</template>
<script>
export default {
data () {
return {
demo: {
top: 0,
height: 0
}
}
},
created () {
const demo = uni.getMenuButtonBoundingClientRect()
this.demo.top = demo.top
this.demo.height = demo.height
}
}
</script>
<style lang="scss">
.demo{
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
font-size: 26rpx;
.left{
float: left;
position: absolute;
width: max-content;
height: max-content;
top: 0;
bottom: 0;
left: 20rpx;
margin: auto;
.iconfont{
color: #3C3C3C;
}
}
}
</style>
效果
刘海屏
