[保姆级教程]uniapp自定义导航栏

文章目录


导文

在 UniApp 中,自定义导航栏通常涉及到隐藏默认的导航栏,并在页面顶部添加自定义的视图组件来模拟导航栏的功能。

隐藏默认导航栏:

全局隐藏

在你的页面 pages.json 配置中,为相应的页面设置 navigationStylecustom,这将隐藏默认的导航栏。

json 复制代码
  	"globalStyle": {
		"navigationStyle": "custom"
	},

当前页面隐藏

json 复制代码
   {
     "pages": [
       {
         "path": "pages/index/index",
         "style": {
           "navigationStyle": "custom"
         }
       },
       // ... 其他页面配置
     ]
   }

添加自定义导航栏视图:

手写导航栏

在你的页面 .vue 文件中,使用 <view><template> 标签在页面顶部添加自定义的导航栏视图。这可以包括标题文本、返回按钮、搜索框等。

html 复制代码
   <template>
     <view class="container">
       <view class="custom-nav-bar">
         <text class="back-button" @click="goBack">返回</text>
         <text class="title">标题</text>
         <!-- 这里可以添加其他导航栏元素 -->
       </view>
       <!-- 页面内容 -->
       <view class="content">
         <!-- ... -->
       </view>
     </view>
   </template>

   <script>
   export default {
     methods: {
       goBack() {
         uni.navigateBack();
       },
       // ... 其他方法
     }
   };
   </script>

   <style>
   .custom-nav-bar {
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: 44px; /* 根据需要调整高度 */
     background-color: #fff; /* 导航栏背景色 */
     /* 其他样式属性 */
   }
   .back-button {
     /* 返回按钮样式 */
   }
   .title {
     /* 标题样式 */
   }
   /* 其他样式 */
   </style>

组件导航栏

使用uinapp原生的组件

dart 复制代码
<template>
	<view class="checkIn">
		
		<view class="checkIn-date">
			<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" left-text="返回"
			title="自定义导航栏" @clickLeft="back" />
		</view>
		<view class="checkIn-main">
			<uni-card title="标题文字" thumbnail="" extra="额外信息" note="Tips">
				内容主体,可自定义内容及样式
			</uni-card>
		</view>
	</view>
</template>

<script>
	
export default {
	components: {
	
	},
	data() {
		return {

		}
	},
	onReady() {

	},
	methods: {

	}
}
</script>

<style>

</style>


官网详细配置》》

您好,我是肥晨。

欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。

相关推荐
2501_915106323 小时前
App Store 软件上架全流程详解,iOS 应用发布步骤、uni-app 打包上传与审核要点完整指南
android·ios·小程序·https·uni-app·iphone·webview
快起来搬砖了3 小时前
实现一个优雅的城市选择器组件 - Uniapp实战
开发语言·javascript·uni-app
数学分析分析什么?3 小时前
Uniapp中使用renderjs实现OpenLayers+天地图的展示与操作
uni-app·openlayers·天地图·renderjs
海绵宝宝不喜欢侬3 小时前
UniApp微信小程序-实现蓝牙功能
微信小程序·uni-app
Python大数据分析6 小时前
uniapp微信小程序商品列表数据分页+本地缓存+下拉刷新+图片懒加载
缓存·微信小程序·uni-app
机构师6 小时前
<uniapp><指针组件>基于uniapp,编写一个自定义箭头指针组件
javascript·uni-app·vue·html
小白_ysf6 小时前
uniapp和vue3项目中引入echarts 、lime-echart(微信小程序、H5等)
微信小程序·uni-app·echarts·h5·lime-echart
imHere·6 小时前
UniApp 分包异步化配置及组件引用解决方案
微信小程序·uni-app·分包
2501_916013748 小时前
App 上架全流程指南,iOS App 上架步骤、App Store 应用发布流程、uni-app 打包上传与审核要点详解
android·ios·小程序·https·uni-app·iphone·webview
0x0008 小时前
Uniapp - 自定义 Tabbar 实现
前端·uni-app