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

原创

已于 2023-11-11 17:14:53 修改 · 829 阅读

标签

#uni-app #vue.js #前端

于 2023-10-28 12:00:25 首次发布

本文详细描述了如何在uniapp中使用Vue实现一个可自适应机型的导航栏，包含标题栏和搜索栏的切换功能，通过JavaScript代码实现控制。

简单的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