微信小程序顶部自定义标题对齐胶囊按钮

微信小程序顶部自定义标题样式对其胶囊按钮

css中使用了uniapp的var(--status-bar-height))获取系统栏高度，

js中使用了uni.getMenuButtonBoundingClientRect(); 该api获取小程序菜单按钮的位置信息，返回的有胶囊按钮的宽、高、上、右、下、左，本例中使用了胶囊按钮的top信息

示例图片如下

page.json配置自定义头部"navigationStyle": "custom"

	{
			"path": "pages/cart/index",
			"style": {
				"navigationBarTitleText": "购物车",
				"navigationBarBackgroundColor": "#b1d6b2",//顶部背景色
				"navigationBarTextStyle": "black", //文字颜色，目前只支持white和black这两种颜色（小程序）
				"navigationStyle": "custom"
			}
		},

cart购物车页面

<template>
  <view style="position: fixed;top: 0;z-index: 1;width: 100%;background: linear-gradient(180deg, #dcedde 100%, transparent 35%);">
      <view class="head" :style="{marginTop: (titleHeight+3) + 'px'}">
      <text class="head-txt">购物车</text>
      <image src="https://cdn.anjiutian.yiyou369.com/miniapp/images/mine/titlePendant.png" class="head-txt-bg" style="width: 60px;height: 22px;" model="widthFix"></image>
    </view>
  </view>
</template>

<script>
	export default {
  	data() {
    	return {
     		titleHeight: 0,
      },
      onl oad(){
    		this.getTitleHeight()
			},
      methods: {
      	 getTitleHeight() {
           let res = uni.getMenuButtonBoundingClientRect();
           console.log("res:",res);
           // #ifdef MP-WEIXIN
           this.titleHeight = res.top;
           // #endif
    	  	},
      }
		}
    
<style lang="scss" scoped>
.page {
	background: linear-gradient(180deg, #dcedde 1%, transparent 35%);
}

.head {
	position: $uni-position-relative;
	@include display-flex;
  @include align-items(center);
  margin: 0 0 $uni-margin-xxl $uni-margin-xxl;
  padding-right: $uni-padding-base;
  width: 70rpx*$hd;
  height: calc(3rpx + var(--status-bar-height));
  @include font($uni-font-size-lg,$uni-color-base,bold);

&-txt {
  position: $uni-position-relative;
  z-index: 10;

  &-bg {
    @include absolute-left-bottom(rpx(-10),rpx(-6));
    width: 60rpx*$hd;
    z-index: 1;
    }
  }
}
</style>

上面是scss自定义的属性写的css

这是css

<style lang="scss" scoped>
.page {
	background: linear-gradient(180deg, #dcedde 1%, transparent 35%);
}

.head {
	position: relative;
	display: flex;
  align-items: center;
  margin: 0 0 30px 30px;
  padding-right: 10px;
  width: 70px;
  //var(--status-bar-height)为uniapp获取的系统栏高度
  height: calc(3px + var(--status-bar-height));
  font-size: 18px;
  color: #101010;
  font-weight: bold;
}

.head-txt {
  position: relative;
  z-index: 10;
}

.head-txt-bg {
    position: absolute;
    left: -6px;
    bottom: -10px;
    width: 60px;
    z-index: 1;
    }
  }
}
</style>