【小程序】自定义标题和返回按钮和胶囊按钮对齐

成品展示

步骤一，HTML代码

<view>
	<view class="bg">
		<view class="back" :style="[{paddingTop:titleTop+'rpx'},{height:bgHeight+'rpx'},{lineheight:titleHeight+'rpx'}]">
			<image src="/static/back2.png" mode=""></image>
			<text>我的钱包</text>
		</view>
	</view>
</view>

步骤二, js代码

<script>
	export default {
    
    
		data() {
    
    
			return {
    
    
				//顶部文字
				titleTop: '',
				titleHeight: '',
				bgHeight: '',
			};
		},
		onLoad() {
    
    
			this.getWxTitleTop()
		},
		methods: {
    
    
			// 标题文字居中
			getWxTitleTop() {
    
    
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				this.titleTop = (menuButtonInfo.top) //标题文字的position:top
				this.titleHeight = (menuButtonInfo.height) //标题文字的高度
				//背景的高度=top+height+需要的下方高度
				this.bgHeight = (menuButtonInfo.top) + (menuButtonInfo.height) + 75
			},
		}
	}
</script>

步骤三, css代码

<style lang="scss">
		.back {
    
    
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
		width: 100%;
		image {
    
    
			position: absolute;
			top: 50%;
			left: 32rpx;
			transform: translate(-50%);
			width: 48rpx;
			height: 48rpx;
		}

		text {
    
    
			color: #ffffffff;
			font-size: 32rpx;
			font-weight: 500;
			font-family: "PingFang SC";
			text-align: center;
		}
	}
</style>