微信小程序自定义顶部组件customHeader的示例代码

下面我将为您详细讲解微信小程序自定义顶部组件customHeader的示例代码的完整攻略。

1. 前言

微信小程序的customComponent是一个非常实用的功能，它能让我们自定义一些重复使用的组件，如自定义顶部组件customHeader。自定义顶部组件有许多的应用场景，比如可以在不同页面中使用同一种顶部样式，这样既能提高效率，也能让应用界面看起来更加美观。

2. 创建customHeader自定义组件

2.1 创建自定义组件

1. 在小程序开发工具中新建一个components文件夹。
2. 在components文件夹中新建一个customHeader文件夹。
3. 在customHeader文件夹中新建一个customHeader.wxml, customHeader.js, customHeader.wxss, customHeader.json四个文件。

2.2 customHeader.wxml

<view class="container">
  <view class="left" bindtap="goBack">
    <image src="../../images/back.png" mode="aspectFit"></image>
  </view>
  <view class="title">{{title}}</view>
  <view class="right">
    <slot name="right"></slot>
  </view>
</view>

2.3 customHeader.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title: {
      type: String,
      value: ''
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    goBack: function () {
      wx.navigateBack({
        delta: 1
      })
    }
  }
})

2.4 customHeader.wxss

.container {
  height: 40rpx;
  line-height: 40rpx;
  background-color: #fff;
  box-shadow: 0 1rpx 3rpx 0 rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  z-index: 999;
  width: 100%;
}

.left,
.right {
  width: 60rpx;
  text-align: center;
}

.title {
  color: #333;
  text-align: center;
  font-size: 16rpx;
  font-weight: bold;
}

2.5 customHeader.json

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

3. 将customHeader组件引入

在需要使用该组件的页面的
json文件中注册并引用该组件即可：

{
  "usingComponents": {
    "custom-header": "/components/customHeader/customHeader"
  }
}

4. 在页面中使用customHeader组件

<custom-header title="自定义顶部组件" />

这样，在页面中就能够使用自定义的顶部组件customHeader啦！

5. Tips

5.1 页面的json文件不要忘了注册

在使用该组件的页面的json文件中，一定要记得注册该组件，否则将无法使用该组件。

5.2 可以添加右侧的自定义内容

在customHeader组件的wxml文件中，通过slot标签可以方便地向组件中添加右侧的自定义内容。

6. 示例说明

6.1 示例1

在一个小程序的多个页面中都需要使用同一个样式的顶部组件，并且在每个页面中的标题都不同，这时可以使用customHeader自定义顶部组件来提高效率并统一界面风格。

6.2 示例2

在一个小程序的某一个页面中需要自定义右侧的内容，比如加入购物车按钮，这时可以通过在customHeader组件的wxml文件中添加slot标签来方便地实现自定义内容的添加。