小程序自定義標題欄

• 文件路徑 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,
		},
		……