简单的uniapp 自定义导航栏标题与搜索栏切换，自适应机型

简单的uniapp 自定义导航栏标题与搜索栏切换，自适应机型，废话不多说直接上代码

htnl vue

	<view class="nav_bar">
			<view class="status_bar">view>
			<view class="status_box">
			
				<image class="status_back" src="/static/icon/ico_left.png" mode="widthFix"  @click="backshouw" >image>
				
				<view class=" status_title" v-if="seen">
					<text class="status_title_txt">这里是标题text>
					<image class="status_title_img" src="/static/icon/zdy_ss.png" mode="widthFix"  @click="searchshow">
					image>
				view>
				
				<view class=" status_search" v-else>
					<input class="status_ss"  @confirm=""  confirm-type="search" placeholder="搜索内容" />
				<text class="status_aniu" @click="searchshow" >取消text> 
				view>
			view>
		view>
		<view class="place_holder">view>

javascript vue

<script>
	export default {
		data() {
			return {
	         seen: true,  //默认显示标题栏
			}
		},
		onLoad() {
			
		},
	
		methods: {		
		 //标题栏切换搜索框
			searchshow: function() {
				var that = this;
				if (that.seen == true) {
					that.seen = false
				} else {
					that.seen = true
				}
			},
			// 返回上一页
			backshouw:function(){
			uni.navigateBack({ 
				delta: 1,
				})
				
				}
	
		}
	}
</script>

css vue

.nav_bar {
		width: 750rpx;
		display: block;
		position: fixed;
		top: 0;
		z-index: 999;
	}
	.place_holder{ width: 750rpx; display: block; height: calc(var(--status-bar-height) + 44px);}

	/*状态栏*/
	.status_bar {
		height: var(--status-bar-height);  // uinapp 自带的获取状态栏高度
		width: 750rpx;
		display: block;
		background: #00a0e9;

	}

	/*导航栏*/
	.status_box {
		width: 750rpx;
		height: 44px;
		background: #00a0e9;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.status_back {
		width: 50rpx;
		height: 50rpx;
		display: block;
		margin-left: 15rpx;
	}

	/*显示标题*/
	.status_title {
		width: 655rpx;
		height: 70rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-left: 15rpx
	}

	.status_title_txt {
		width: 590rpx;
		height: 70rpx;
		line-height: 70rpx;
		display: block;
		margin-right: 15rpx;
		color: #fff;
		text-align: center;
	}

	.status_title_img {
		width: 50rpx;
		height: 50rpx;
		display: block;
		margin: auto;
	}

	/*显示搜索*/
	.status_search {
		width: 655rpx;
		height: 70rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-left: 15rpx
	}

	.status_ss {
		width: 540rpx;
		height: 65rpx;
		line-height: 65rpx;
		display: block;
		margin-right: 15rpx;
		color: #fff;
		background-color: #fff;
		text-align: left;
		border-radius: 100rpx;
		font-size: 28rpx;
		padding-left: 20rpx;
		color: #000;
	}

	.status_aniu {
		width: 80rpx;
		height: 65rpx;
		line-height: 65rpx;
		display: block;
		font-size: 32rpx;
		color: #fff;
		text-align: center;
	}

最终效果