最近因?yàn)榇蟓h(huán)境的影響，公司決定做小程序來應(yīng)對市場的變化。所以我也來學(xué)習(xí)小程序開發(fā)，而且希望培養(yǎng)自己記錄問題的習(xí)慣。今天就來記錄下自定義標(biāo)題。

一、首先找到你的頁面的json文件

在這通常是設(shè)置標(biāo)題，和引用組件的?，F(xiàn)在加上："navigationStyle":"custom"，去掉小程序自帶的頭部和返回鍵，但是會保留右上角的膠囊?，F(xiàn)在可以自定義頭部了。

{
  "usingComponents": {},
  "navigationStyle":"custom"
}

先給大家看下效果圖：

自定義標(biāo)題欄.jpg

wxml代碼：

<view class="Header" style="padding-top:{{statusBarHeight}}px">
  <image class="back" src="/assets/images/ic_back.png" bindtap="backClick"/>
  <view class="Info">
    <view class="title" data-type="0" bindtap="titleChangeClick">
      <text class="titleText">商品</text>
      <view hidden="{{currentTab==0?false:true}}" class="bottom"></view>
    </view>
    <view class="title" data-type="1" bindtap="titleChangeClick">
      <text class="titleText">評價</text>
      <view hidden="{{currentTab==1?false:true}}" class="bottom"></view>
    </view>
    <view class="title" data-type="2" bindtap="titleChangeClick">
      <text class="titleText">詳情</text>
      <view hidden="{{currentTab==2?false:true}}" class="bottom"></view>
    </view>
  </view>
  <image class="back" />
</view>

wxss代碼：

.Header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  background-color: #3878f4;
  height: 45px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}

.Info {
  flex: 1;
  height: 100%;
  display: flex;
  justify-content: center;
}
.title{
  position: relative;
  display: flex;
  align-items: center;
  margin: 5rpx;
}
.back {
  width: 55rpx;
  height: 53rpx;
  margin: 10rpx;
}
.titleText {
  color: white;
  size: 26rpx;
}
.bottom {
  position: absolute;
  bottom: 0;
  background-color: white;
  height: 5rpx;
  width: 100%;
}

js代碼

const app = getApp()
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    currentTab:{
      type: Number,
      value:0
    }
  },

  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {
    statusBarHeight: app.globalData.statusBarHeight,
  },

  /**
   * 組件的方法列表
   */
  methods: {
    titleChangeClick(e){//標(biāo)題切換
      var currentTab = e.currentTarget.dataset.type;
      this.setData({
        currentTab
      })
      this.triggerEvent('changeTitle', {
        currentTab: currentTab
      })
    },
    backClick(e){
      wx.navigateBack({});
    }
  }
})