小程序组件开发（自定义头部）

备注：小程序组件 js文件不要写 page（）等，开发过程没有问题上传在真机上会报错

一下以自定义导航头部为实例：

header.js文件：

// pages/components/header/header.js
// // 启用插槽
Component({
  options: {
      multipleSlots: true
  },
  properties:{
    headerOpt:{
      type:Object,
      value:{
        showGoBack:true,
        showGoHome:true,
        backPath:'',
        homePath:'',
        styles:'',
        titleImg:'',
        title:'KOC'
      },
      observer: function(newVal, oldVal) {
        // 属性值变化时执行
        this.data.headerOpt = { ...oldVal,  ...newVal  }
        this.setData({
          headerOpt:this.data.headerOpt
        })
        // console.log(this.data.headerOpt)
      }
    },
    // 状态栏高度
    statusBarHeight: {
      type:String,
      value:wx.getStorageSync('statusBarHeight') + 'px'
    },
    // 导航栏高度
    navigationBarHeight:{
      type:String,
      value: wx.getStorageSync('navigationBarHeight') + 'px'
    },
    // 胶囊按钮高度
    menuButtonHeight:{
      type:String,
      value: wx.getStorageSync('menuButtonHeight') + 'px'
    },
    // 导航栏和状态栏高度
    navigationBarAndStatusBarHeight:{
      type:String,
      value: wx.getStorageSync('statusBarHeight') + wx.getStorageSync('navigationBarHeight') + 'px'
    }
  },
  methods: {
    // 回到首页
    goHome(val) {
      // console.log(this.data.headerOpt.homePath)
      if(this.data.headerOpt.homePath !=''){
        wx.redirectTo({
          //目的页面地址 原页面保留
          url: '/pages' + this.data.headerOpt.homePath,
          success: function(res){},
        })
        return false
      }
      // if(pages.length > 1){
      //   wx.navigateBack({
      //     delta: pages.length
      //   });
      // }else{
        // 清除栈页面元素
        wx.reLaunch({
          //目的页面地址 原页面保留
          url: '/pages/kocindex/kocindex',
          success: function(res){},
        })
        var pages = getCurrentPages();
      // }
    },
    // 返回上一页或者指定页面
    goBack:function(){
      if(this.data.headerOpt.backPath !=''){
        wx.redirectTo({
          //目的页面地址 原页面保留
          url: '/pages' + this.data.headerOpt.backPath,
          success: function(res){},
        })
        return false
      }
      var pages = getCurrentPages();
      // console.log(pages)
      // return false;
      if(pages.length == 1){
        // 清除栈页面元素 回到首页
        wx.reLaunch({
          //目的页面地址 原页面保留
          url: '/pages/kocindex/kocindex',
          success: function(res){},
        })
      }else{
        wx.navigateBack();
      }
    }
},
})

View Code