ColorUI已经给出了UniApp 的写法,但 Megalo 有一些特性并不能完全适配这种写法。
- 首先将navigationStyle置为’custom’
- 在 App.vue 中添加 onLaunch 代码
<script>
export default {
globalData() {
return {
statusBar: null,
customBar: null,
custom: null
}
},
onLaunch: function(options) {
const that = this
Mp.getSystemInfo({
success: function(e) {
that.globalData.statusBar = e.statusBarHeight
const custom = wx.getMenuButtonBoundingClientRect()
that.globalData.custom = custom
that.globalData.customBar = custom.bottom + custom.top - e.statusBarHeight
}
})
}
</script>
- 添加 Custom 的 navbar组件,基于ColorUI代码,添加了 mounted方法
mounted() {
const app = getApp()
this.statusBar = app.globalData.statusBar
this.customBar = app.globalData.customBar
}
- 在 page 页面添加对 navbar 的引用。
完。
Wow because this is extremely good job! Congrats and keep it up. Herta Gill Dikmen