2023.08.05 | admin | 216次围观
写在前面:文章中属性是手写,如有错误,按提示改正就行。
当然第一步得设置 “navigationstyle":"custum" 也就是自定义导航栏,这时候导航栏就会消失。
我们自定义一个view,设置成导航栏的宽高微信小程序tabbar高度,绝对定位在屏幕上就可以。
最难的地方是获取原始导航栏高度微信小程序tabbar高度,宽度100%,这个好说。对了,这个view的父元素得设置成display:flex; flex-direction:colum,也就是用flex垂直排列。还要设置下page。整个css代码我先粘贴出来
page {
height: 100%;
}
.navbar {
width: 100%;
background-color: black;
/* overflow: hidden; */
position: relative;
top: 0;
left: 0;
/* z-index: 10;
flex-shrink: 0; */
}
.view-page {
display: flex;
height: 100%;
flex-direction: column;
/* overflow: hidden; */
}
.view-page .page-content {
flex: 1;
overflow-y: auto;
box-sizing: border-box;
}
然后是wxml的结构代码
最后是js
const app = getApp()
Page({
data:{
myheight:""
},
globalData: {
},
onShow: function () {
var that=this;
let menuButtonObject = wx.getMenuButtonBoundingClientRect();
wx.getSystemInfo({
success: res => {
//导航高度
let statusBarHeight = res.statusBarHeight,
navTop = menuButtonObject.top,
navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight)*2;
this.globalData.navHeight = navHeight;
this.myheight=navHeight;
that.setData({
myheight: navHeight
})
console.log( this.myheight );
// this.globalData.navTop = navTop;
// this.globalData.windowHeight = res.windowHeight;
},
fail(err) {
console.log(err);
}
})
}
})
这里需要说明的是,要用在onshow方法里。别用在onload,因为onload时候还获取不到高度。还有that this来传值,还有setData方法来传值。
好了,这几点注意就可以了。理解了,自然就会用了。
下一步出个uniapp的 自定义设置微信导航栏navigation的文章,敬请关注。
版权声明
本文仅代表作者观点。
本文系作者授权发表,未经许可,不得转载。
发表评论