关于小程序自定义标题-商品详情

最近因为大环境的影响，公司决定做小程序来应对市场的变化。所以我也来学习小程序开发，而且希望培养自己记录问题的习惯。今天就来记录下自定义标题。

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

在这通常是设置标题，和引用组件的。现在加上："navigationStyle":"custom"，去掉小程序自带的头部和返回键，但是会保留右上角的胶囊。现在可以自定义头部了。

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

先给大家看下效果图：

自定义标题栏.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
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    statusBarHeight: app.globalData.statusBarHeight,
  },

  /**
   * 组件的方法列表
   */
  methods: {
    titleChangeClick(e){//标题切换
      var currentTab = e.currentTarget.dataset.type;
      this.setData({
        currentTab
      })
      this.triggerEvent('changeTitle', {
        currentTab: currentTab
      })
    },
    backClick(e){
      wx.navigateBack({});
    }
  }
})