在app.json里面添加属性

"navigationStyle": "custom"

在小程序内新建一个文件夹 components

在components文件夹里面新建一个navbar的公用组件的文件夹并创建相应的4个文件

在navbar.json 里面 

{

“component”：true

}

在navbar.js里面

// pages/common/pop/pop.js

const app = getApp();

Component({

  options: {

    multipleSlots: true // 在组件定义时的选项中启用多slot支持

  },

  /**

  * 组件的属性列表

  * 用于组件自定义设置

  */

  properties: {

    // 弹窗标题

    title: { // 属性名

      type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）

      value: '初始值' // 属性初始值（可选），如果未指定则会根据类型选择一个

    },

    //icon内容

    content: { type: String, value: 'icon地址' },

    // back

    backUp: {type: String, value: 'home'}

  },

  data :{  //定义navbar 需要的数据

    statusHeight:'',

    navHeight:''

  },

  ready(){  //执行方法

    this.getHeight();

  },

  methods: {

  getHeight() {

    let sysinfo = wx.getSystemInfoSync();

    let statusHeight = sysinfo.statusBarHeight;

    let isiOS = sysinfo.system.indexOf('iOS') > -1;

    let navHeight = 0;

    if (!isiOS) {

      navHeight = 48;

    } else {

      navHeight = 44;

    }

    this.setData({

      statusHeight: statusHeight,

      navHeight: navHeight

    })

    app.globalData.statusHeight = statusHeight;

    app.globalData.navHeight = navHeight;

  }

  },

})

在navbar.wxml 和 navbar.wxss里面布局和样式的书写。

如何在页面引用公用组件

例如 ：index.wxml里面引用 

 首先：在index.json 里面

{

"usingComponents": {

    "v-navbar": "/components/navbar/navbar"

  }

}

其次 index.wxml里面引入

页面展示效果