一、在app.js中获取设备的参数
let menuButtonObject = wx.getMenuButtonBoundingClientRect();
console.log(menuButtonObject)
wx.getSystemInfo({
success: res => {
//导航高度
let statusBarHeight = res.statusBarHeight,
navTop = menuButtonObject.top,
navRight = menuButtonObject.right,
navWidth = menuButtonObject.width,
navHeight = menuButtonObject.height;
this.globalData.navWidth = navWidth;
this.globalData.navHeight = navHeight;
this.globalData.navTop = navTop;
this.globalData.navRight = navRight;
this.globalData.windowHeight = res.windowHeight;
},
fail(err) {
console.log(err);
}
})
二、在wxml中设置style样式
<cover-view wx:if="{{isbackScan}}" style='z-index: 1000;position: absolute;top:{{navTop}}px;left:11px;background-color:rgba(255,255,255,.6);width:{{navWidth}}px;height:{{navHeight}}px;border-radius: 20px;'></cover-view>
<cover-image wx:if="{{isbackScan}}" style="z-index: 1050;position: absolute;top:{{navTop + navWidth*0.07}}px;left:28px;width:15px;height:18px;" bindtap="clearMainPage" src="/assets/img/main/back.png"></cover-image>
<cover-image wx:if="{{isbackScan}}" style="z-index: 1050;position: absolute;top:{{navTop + navWidth*0.07}}px;left:63px;width:18px;height:18px;" bindtap="clearMainPage" src="/assets/img/main/main.png"></cover-image>
三、根据获取到的系统参数，调整顶部按钮的样式