小程序自定义顶部标题文字居中

在做小程序开发，经常需要自己写顶部相关的知识，所以就封装了一个通用的顶部标题组件。

新建一个components文件夹，再在文件夹中新建一个topTitle文件夹，将topTitle.json,topTitle.ts,topTitle.wxml,topTitle.wxss,四个文件放入该文件夹中。

1. topTitle.json

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

2. topTitle.ts

// components/step/step.ts
const app = getApp()
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        //标题数据
        title: {
            type: String,
            value: ""
        },
        color: {
            type: String,
            value: "black"
        },
        back: {
            type: Boolean,
            value: true
        },
        hideBack: {
            type: Boolean,
            value: false
        },
        backFun: null
    },

    /**
     * 组件的初始数据
     */
    data: {
        navBarHeight: 0,
        menuRight: 0,
        menuTop: 0,
        menuHeight: 0,
    },
    onLoad(){
  // 获取系统信息
    const systemInfo = wx.getSystemInfoSync();
    // 胶囊按钮位置信息
    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
    // 导航栏高度 = 状态栏高度 + 44
   const navBarHeight = systemInfo.statusBarHeight + 44;
    const menuRight = systemInfo.screenWidth - menuButtonInfo.right;
    const menuTop = menuButtonInfo.top;
    const menuHeight = menuButtonInfo.height;
    this.setData({
    navBarHeight:navBarHeight,
    menuRight:menuRight,
    menuTop:menuTop,
    menuHeight:menuHeight
    })
   },

    /**
     * 组件的方法列表
     */
    methods: {
        bindViewTap() {
            if(this.properties.back){
                wx.navigateBack();
            }
            this.triggerEvent('back')
        }

    },
})

3. topTitle.wxml

<view class="nav-bar" style="top:{{menuTop}}px;color:{{color}};height:{{menuHeight}}px">
  <view class="top-show" style="height:{{menuHeight}}px">
    <view class="top-back" wx:if="{{!hideBack}}"  bindtap="bindViewTap" style="height:{{menuHeight}}px">
      <image class="top-back-icon" src="../../assest/image/common/img_common_back.png" mode="" />
    </view>
    <view class="top-title {{hideBack?'mr0':'mr88'}}" style="height:{{menuHeight}}px">
      {{title}}
    </view>
  </view>
</view>

4. topTitle.wxss

.nav-bar {
    width: 100%;
    top: 0;
    position: fixed;
}

.top-show {
    display: flex;
    height: 100%;
    align-items: center;
}

.top-title {
    width: 100%;
    font-size: 32rpx;
    font-weight: 500;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mr0 {
    margin-right: 0rpx;
}

.mr88 {
    margin-right: 76rpx;
}

.top-back {
    padding-right: 25rpx;
    margin-left: 28rpx;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.top-back-icon {
    width: 21.6rpx;
    height: 39.6rpx;
}

5、使用方法： 在需要的页面中，设置index.json

{
    "usingComponents": {
        "top-title": "/components/topTitle/topTitle"
    },
    "navigationStyle": "custom"
}

在对应的index.wxml最顶部写上

<view class="page-content">
  <view class="top" style="height:{{menuTop+40}}px;">
    <view class="title-top">
      <top-title title="测试标题" hideBack="true"></top-title>
    </view>
  </view>
  <view class="page-container" style="margin-top:{{menuTop+40}}px;height: calc(100% - {{menuTop+40}}px);">
  </view>
</view>

样式设置为 index.wxss

page {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.page-content{
  height: 100%;
}

.top {
  z-index: 50;
  width: 100%;
  position: fixed;
  top: 0;
  background-color: #F3F5F7 !important;
}

获取到胶囊的高度 index.ts

Page({
  data: {
    menuTop: 0,
  },
  onShow() {
  // 胶囊按钮位置信息
    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
    this.setData({
      menuTop:menuButtonInfo.top
    })
  },
});