自定义小程序头部

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组件

调用     （框的就是动态设置的参数）