小程序自定义标题栏

• 文件路径 components/NavBar.vue 。

	<view class="navbar">
		<view class="content" :style="{ background: isScrolling ? '#fff' : bagColor }">
		    <!-- 状态栏 -->
			<view :style="{ height: `${getHeight.barTop}px` }"></view>
			<!-- 标题栏 -->
			<view class="acea-row row-center-wrapper bar" :style="{ height: `${getHeight.barHeight}px` }">
				<view class="back-icon acea-row row-center-wrapper">
				    <!-- 返回键 -->
					<view
						v-show="showBack"
						@click="back"
						class="iconfont icon-ic_leftarrow back-icon"
						:style="{ color: `${iconColor}`, fontSize: `${iconSize}`, fontWeight: `${iconWeight}` }"
					></view>
				</view>
				<!-- 标题 -->
				<view class="title" :style="{ color: `${textColor}`, fontSize: `${textSize}`, fontWeight: `${textWeight}` }">{{ titleText }}</view>
				<!-- 右侧操作 -->
				<view class="right-icon acea-row row-center-wrapper">
					<view v-show="showRight" class="right-icon"></view>
				</view>
			</view>
		</view>
		<!-- 标题栏占位 -->
		<view class="placeholder">
			<view :style="{ height: `${getHeight.barTop}px` }"></view>
			<view :style="{ height: `${getHeight.barHeight}px` }"></view>
		</view>
	</view>

• 工具函数

	data() {
		return {
		    // getHeight：barTop 状态栏高度，barHeight 标题栏高度，barWidth 胶囊按钮宽度
			getHeight: this.$util.getWXStatusHeight()
		};
	},

• 使用示例

文件路径 pages/users/user_vip/index.vue 。

<template>

	<view>

	        ……

			<!-- #ifdef MP -->
			<NavBar titleText="会员中心" :iconColor="iconColor" :textColor="iconColor" :isScrolling="isScrolling" showBack></NavBar>
			<!-- #endif -->
			……

<script>
    ……
	import NavBar from '@/components/NavBar';
	
	export default {
		components: {

			NavBar,
		},
		……