vue, 小程序

Megalo 中使用 Custom NavigationStyle

By jere on 2019-06-23 1 Comment

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 的引用。

完。

打赏
  1. download说道:

    Wow because this is extremely good job! Congrats and keep it up. Herta Gill Dikmen

Leave a comment to download

您的电子邮箱地址不会被公开。 必填项已用*标注