微信小程序自定义头部,支持各种形状
程序员文章站
2022-06-16 12:56:09
微信小程序自定义头部,支持各种形状一 引入自定义头部组件二 设置app.json(“navigationStyle”: “custom”)"navigationStyle": "custom"app.js中添加代码(获取屏幕信息,设置头部高度)getScreenHeight() {//获取手机屏幕信息。设置头部高度let menuButtonObject = wx.getMenuButtonBoundingClientRect();wx.getSystemInfo({success:...
一 引入自定义头部组件
二 设置app.json(“navigationStyle”: “custom”)
"navigationStyle": "custom"
三 app.js中添加代码(获取屏幕信息,设置头部高度)
getScreenHeight() {
//获取手机屏幕信息。设置头部高度
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.globalData.navTop = navTop;
this.globalData.windowHeight = res.windowHeight;
},
fail(err) {
console.log(err);
}
})
}
四 引用自定义组件
"nav-bar": "/components/navBar/navBar"
五 页面上使用
<nav-bar page-name="测试页面"></nav-bar>
六 最终效果图
其它说明
- 图标使用得阿里云图标,在app.wxss中引入
- 内容也是结合其它同行代码写出来,再结合了自己的想法
- 上面得例子是源码中得test1,其它更复杂得使用请看testx
- 总结的时候未梳理代码,但可正常使用,可能存在部分代码冗余,请自查
- 比较复杂使用请参考后续demo(目前只有一个demo)
- demo地址:https://download.csdn.net/download/Heandme/14157042
本文地址:https://blog.csdn.net/Heandme/article/details/112575895