appointment_weapp/components/navbar.vue

<template>
	<view class="index">
		<view class="navbar" :style="[{'background':Background},{'height':HeighT.customBar+'px'}]" >
			<!-- 		<view v-if="navboxshow == '0'" class="navbar_tow flex-between"
				:style="[{'background':Backgroundtow},{'padding-right':HeighT.custwidth + 'px'},{'top':HeighT.customBar+'rpx'}]"> -->
			<!-- #ifndef H5 -->
			<view v-if="navboxshow == '0'" class="navbar_tow flex-between"
				:style="[{'background':Backgroundtow},{'top':HeighT.customBar+'rpx'}]">
			<!-- #endif -->
				<!-- #ifdef H5 -->
				<view v-if="navboxshow == '0'" class="navbar_tow flex-between" :style="[{'background':Backgroundtow}]">
				<!-- #endif -->
					<!-- 盒子1  返回标题 -->
					<view class="flex-between">
						<!-- 	<u-icon name="arrow-left" color="#000" size="22" @click="childMethod('left')"></u-icon> -->
						<text class="navbar_tow_one">{{navtitle}}</text>
					</view>
				</view>
				<view v-if="navboxshow == '1'" class="navbar_tow flex-between"
					:style="[{'background':Backgroundtow},{'padding-right':HeighT.custwidth + 'px'},{'top':HeighT.customBar+'px'}]">
					<!-- 盒子2  返回标题搜索框 -->
					<view class="flex-between">
						<u-icon name="arrow-left" color="#000" size="22"
							@click="childMethod('left',navMethodcan)"></u-icon>
						<u-search placeholder="请输入关键字" :showAction='false' v-model="keyword"></u-search>
					</view>
				</view>
				<view v-if="navboxshow == '4'" class="navbar_tow flex-between"
					:style="[{'background':Backgroundtow},{'padding-right':HeighT.custwidth + 'px'},{'top':HeighT.customBar+'rpx'}]">
					<view class="flex-between">
						<u-icon name="arrow-left" color="#000" size="22" @click="childMethod('left')"></u-icon>
						<text class="navbar_tow_one">{{navtitle}}</text>
					</view>
				</view>
				<view v-if="navboxshow == '3'" class="navbar_tow flex-between"
					:style="[{'background':Backgroundtow},{'padding-right':HeighT.custwidth + 'px'},{'top':HeighT.customBar+'rpx'}]">
					<!-- 盒子3  返回标题搜索框 -->
					<view class="flex-between">
						<u-icon style="z-index: 9999;" name="arrow-left" color="#000" size="22"
							@click="childMethod('left')"></u-icon>
						<text
							style="flex: 1; text-align: center;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 28rpx;padding: 0 5rpx;">{{navtitle}}</text>
					</view>
				</view>
				<!-- #ifndef H5 -->
				<view v-if="navboxshow == '2'" class="navbar_tow flex-between"
					:style="[{'background':Backgroundtow},{'top':HeighT.customBar+'px'}]">
				<!-- #endif -->
					<!-- #ifdef H5 -->
					<view v-if="navboxshow == '2'" class="navbar_tow flex-between"
						:style="[{'background':Backgroundtow}]">
					<!-- #endif -->
						<!-- 盒子3  返回kongbai  -->
						<view class="flex-between">
							<u-icon name="arrow-left" color="#000" size="22" @click="childMethod('left')"></u-icon>
							<text class="navbar_tow_there">{{navtitle}}</text>
						</view>
					</view>

				</view>
				<!-- #ifdef MP-WEIXIN -->
				<view v-if='collapse' :style="[{'padding-top':HeighT.customBar+'px'}]"></view>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<view v-if='collapse' style="padding-top:44px;"></view>
				<!-- #endif -->
			</view>
</template>
<script>
	import navbar from '../uni_modules/uview-ui/libs/config/props/navbar';
	export default {
		data() {
			return {
				Backgroundtow: 'none',
				keyword: ""
			}
		},
		props: {
			navboxshow: {
				type: String,
				default: '0'
			},
			navtitle: {
				type: String,
				default: '预约'
			},
			navMethodcan: {
				type: Number,
				default: 0
			},
			Background: {
				type: String,
				default: '#fff'
			},
			collapse: {
				type: Boolean,
				default: true
			}
		},
		computed: {
			HeighT() {
				return this.$store.getters.is_BarHeight
			},
		},
		methods: {
			childMethod(a, b) {
				this.$emit('fatherMethod', a)
			},

		}
	}
</script>

<style lang="scss">
	.index {
		.navbar {
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 999;

			.navbar_one {}

			.navbar_tow {
				width: 100%;
				position: relative;
				background: none;
				height: $uni-height-nav;
				line-height: $uni-height-nav;
				font-size: 36rpx;

				.flex-between {
					width: 100%;
					display: flex;

					.navbar_tow_one {
						flex: auto;
						text-align: center;
						font-size: 36rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						color: #333333;
					}

					.navbar_tow_there {

						position: absolute;
						text-align: center;
						width: 100%;
					}
				}

			}
		}
	}
</style>