自定義小程序頭部

1.app.json中設置如下

這里usingComponents寫自定義頭部的調用名稱和其對應的路徑

 .接下來就構建頭部啦(和寫頁面一樣寫）

1）.寫wxml，這些動態設置的值在調用的時候可以動態賦值

<view class='wx_header' style="background:{{background}}">
   <text class='iconfont icon-left' wx:if="{{icon==1}}" style="color:{{color}}" bindtap='_gourl'></text>
   <text class='title' style="color:{{color}}">{{title}}</text>
</view> 

　　

 2）wxss....

 3)   json

{
  "component": true,
  "usingComponents": {}
}

4) js 在  properties設置后面會動態設置的數據屬性名，隨便定義(在父級調用)

//獲取應用實例
const app = getApp();

Component({
  options: {
    multipleSlots: true, // 在組件定義時的選項中啟用多slot支持
  },
  /* 組件的屬性列表*/
  properties: {
    title: { // 標題名
      type: String, // 類型（必填）
    },
    icon: {  //是否有返回箭頭
      type: String
    },
    background: { // 背景色
      type: String
    },
    color: { // icon及title色值
      type: String
    },
    goUrl: { // icon點擊跳轉路徑，默認回退
      type: String
    },
    refresh: { //
      type: Boolean
    }
  },
  data: {
    // 組件顯示控制
    // isShow: false
  },
  /*組件的方法列表*/
  methods: {
　　//返回跳轉，可以根據需要修改
    _gourl() {
      console.log(this.data.goUrl);
      if (this.data.goUrl != '' && this.data.goUrl != undefined) {
        if (this.data.goUrl == '/pages/index/index') {  //因為該頁面在tabbar中設置了，所以需要switchTab跳轉
          wx.switchTab({
            url: this.data.goUrl
          })
        } else {
          wx.redirectTo({
            url: this.data.goUrl
          })
        }
      } else {
          wx.navigateBack();
      }
    },
    /*內部私有方法建議以下划線開頭 triggerEvent 用於觸發事件*/
    _error() {
　　var j={} 需要傳的參數
　　this.triggerEvent("error",j)

 

開始調用

首先在調用頁面的json 引用header組件

調用     （框的就是動態設置的參數）