vue/微信小程序 标题栏适配

背景

vue 编写小程序代码,打包为小程序,小程序原有title样式不太符合,所以自己写了个通用的自定义title,便于各个页面复用.

自定义标题 custom-page-title

原理

为了使我们的项目更好的适配所有的机型，那么就需要先分析一下：

我们可以发现：
Android 跟 iOS 顶部有差异的，表现在顶部到胶囊按钮之间的距离有高度差；
胶囊按钮高度为32px， iOS 和 Android 一致。

1、手机机型太多：自定义导航栏高度在不同机型始终无法达到视觉上的统一
2、胶囊按钮位置不固定：导航栏元素（文字，图标等）怎么也对不齐胶囊按钮

解决办法:

比较简单的就是 让标题栏高度就是 胶囊高度,然后让标题的顶部距离就是胶囊的顶部距离,再让标题内的内容上下居中.就完美解决对齐问题了

(进阶版:标题栏高度和 胶囊高度不一致的情况下,就需要自己通过计算:获取标题栏的margin-top)

PS.注意

1.由于胶囊按钮是原生组件，为表现一致，其单位在各系统都为 px，所以我们的自定义导航栏各个高度的单位都必需是px（切记不能用rpx），才能完美适配

代码

<!--  自定义标题栏,在页面配置"navigationStyle": "custom"情况下使用,
其中标题高度和微信小程序 右侧胶囊高度保持一致 32px,以便保持title内容和胶囊居中对齐-->
<template>
  <view class="title-info" :style="'margin-top:' + menuTop + 'px'">
    <view class="v-back" v-if="leftShow" @tap="back">
      <image class="img-back" :src="require('../../static/imgs/ic_back.png')"></image>
    </view>
    <view class="title">{{ title }}</view>
  </view>
</template>
<script>
export default {
  name: "pageTitle",
  components: {},
  props: {
    title: { type: String, default: "" },
    leftShow: { type: Boolean, default: true }
  },
  methods: {
    back() {
      uni.navigateBack({});
    },
    init() {
      //微信模式下获取胶囊位置
      if (process.env.UNI_PLATFORM == "mp-weixin") {
        this.title = "我是标题";
        //获取右侧胶囊的大小高度
        let rightMenuButton = uni.getMenuButtonBoundingClientRect();
        this.menuTop = rightMenuButton.top;
        console.log("胶囊位置大小:", "顶部", this.menuTop);
      }
    }

  },
  data() {
    return {
      menuTop: 24
    };
  },
  mounted() {
    this.init();
  }
};
</script>

<style lang="scss" scoped>

.title-info {
  display: flex;
  position: relative;
  height: 32px;
  flex-direction: row;
  width: 100%;


  .v-back {
    position: absolute;
    left: 16rpx;
    height: 32px;
    display: flex;
    flex-direction: row;

    .img-back {
      margin: 8px;
      width: 9px;
      height: 16px;
    }
  }

  .title {
    width: 100% !important;
    font-size: 34rpx;
    line-height: 32px;
    height: 32px;
    width: auto;
    font-family: "bold";
    color: #333333;
    text-align: center;
  }
}
</style>

使用示例

<template>
  <view class="content">
        <custom-page-title class="custom-title" title="青梅恋语" :leftShow="false">
        </custom-page-title>
    <scroll-view class="scroll-view" :scroll-y="true">
      <view class="u-info">
        <view>内容区域</view>
      </view>
    </scroll-view>
   </view>
</template>

<script>

import CustomPageTitle from "@/modules/marriage/component/custom-page-title";

export default {
  components: {
    CustomPageTitle
  },
  data() {
    return {};
  },
  
  methods: {
  }
};
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  font-family: serifsc;
  background-color: #0AD3D8;

  .scroll-view {
    height: calc(100% - var(--status-bar-height) - 108rpx);
    background-color: #B4F5F6;

    .u-info {
      width: 100%;
      display: flex;
      flex-direction: column;
    }
  }
}
</style>

使用注意

1.在页面中有 一些自己占据高度的弹窗 等内容时(例如: u-picker),将他放到 custom-page-tile 下面调用.否者 会将 custom-page-title往下挤,导致和右侧胶囊对不齐.

参考资料

小程序轻松实现一个完美适配各种机型的自定义导航栏