wx.js
/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { let menuButtonObject = wx.getMenuButtonBoundingClientRect(); wx.getSystemInfo({ success: (res) => { // console.log(res.windowHeight*2) let statusBarHeight = res.statusBarHeight; const navTop = menuButtonObject.top; //胶囊按钮与顶部的距离 const navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2; //导航高度 let height = res.windowHeight * 2 - navHeight * 2 - 40 - 315 - 40; this.setData({ navHeight: navHeight * 2, navTop: navTop * 2, height }) this.setData({}, () => { // console.log(30+315+40+34+30+176) }) } }) },
wx.ml中写法
<view style="height:{{navHeight+\'rpx\'}};" class="window_top"> <view class="w_noback" style="top:{{navTop+10+\'rpx\'}}" bindtap="returnpre"></view> <view class="w_text" style="margin-top:{{navTop+\'rpx\'}}">个人主页</view> </view>
wx.xss写法
/* pages/homework/commentHomework/index.wxss */ .window_top { width: 750rpx; box-sizing: border-box; text-align: center; position: fixed; left: 0; top: 0; color: #ffffff; z-index: 999; background: linear-gradient(144deg, #4FB0FA 0%, #2794E9 100%); } .w_text { height: 48rpx; font-size: 34rpx; font-family: PingFangSC-Semibold, PingFang SC; font-weight: 500; line-height: 48rpx; } .w_noback { width: 18rpx; height: 34rpx; position: absolute; left: 34rpx; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAiCAYAAABStIn6AAABiElEQVRIS63WXUtUURTG8f9jX8OvIyISUoMQwQx6oXQRGCgoGBQkGBQhXoiCTBdBYuCFIAiCEAQidN0n6BMkmmbmI0fOGZbTvJ3Znst9WD/2y1prb5Hw2V4FfkjaUL+O7RVgBrgGpvuCbL8HZsMk6qUh22+B+YB8AiZKQbaXgMWAbAFVSf96hmy/Bl4F5AvwNEOysZ4g2y+BNwHZAZ5IuirGukK2F4DlgOwC45L+xhPvCNmeA96FgD2gIumyOW3aQrZfAB/C8veBR5L+tMq9lpDt50CWtcX/A2BM0kW7BP4Psv0MWAvIIfBQ0nmnKrgD2Z4C1oGBPOgrMCrpd7dSakC2J4HNgHwDRiSddUMaeWS7CnwEHuRBR8CwpNNekFvI9mMgy9ICOc6Rk16RAvoJDOZB34EhSb/KIPcOVYDt5KVl07JdA+pJm13sxb0cf8DSEzJg6SUSsPSiDVh6GwlYemMLWHqrDVh68w9Y+nUUsOYL8jNQK3VBBiz9yg5Y+iMiYOnPmoA1Hlo34RrEFXeHTGYAAAAASUVORK5CYII="); background-size: 100% 100%; background-repeat: no-repeat; }