uniapp自定义导航栏左中右内容和图标,以及点击事件

uniapp自定义导航栏左中右内容和图标,以及点击事件

效果:

页面:

javascript 复制代码
		<view class="navigation-bar">
			<view class="navigation-bar-left" @click="navigateBack">
				<u-icon name="arrow-left" size="20"></u-icon>
			</view>
			<view class="navigation-bar-title">
				<view class="navBarTitle">
					<view>{{userName}}</view>
					<u-icon name="edit-pen" size="20"></u-icon>
				</view>
			</view>
			<view class="navigation-bar-right">
				<u-icon name="list-dot" size="24" @click="openSettings"></u-icon>
			</view>
		</view>

方法:

javascript 复制代码
methods:{
navigateBack() {
// 处理返回逻辑,可以是uni.navigateBack或uni.switchTab等
   uni.navigateBack();
			},
openSettings() {
// 处理设置图标点击事件
   uni.navigateTo({
url: '/pagesA/registration/useLoginList/useLoginList'
				})
			},
editUser() {
	uni.showToast({
		title: '点击了设置',
		icon: 'none'
			});
		}
}

样式:

javascript 复制代码
	.navigation-bar {
		display: flex;
		align-items: center;
		padding: 10px;
		background-color: #fff;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 100;
	}

	.navigation-bar-left,
	.navigation-bar-right {
		width: 50rpx;
		display: flex;
		align-items: center;
		margin-right: 20px;
	}


	.navigation-bar-title {
		flex: 1;
		text-align: center;
		font-size: 18px;
	}

	.navBarTitle {
		display: flex;
		align-items: center;
		justify-content: center;
	}

page.json中配置不显示默认导航栏

javascript 复制代码
{
			"path": "registration/useLoginList/useLoginList",
			"style": {
			"navigationBarTitleText": "使用登记清单",
			"enablePullDownRefresh": false
					}
				}
相关推荐
军军君018 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具四:后端项目基础框架搭建下
spring boot·spring·面试·elementui·typescript·uni-app·mybatis
小徐_233312 小时前
uni-app 弹窗总被父元素“绑架”?3招破局,H5/小程序/APP一招通杀!
前端·微信小程序·uni-app
Java陈序员18 小时前
又一款基于 SpringBoot + Vue 实现的开源新零售商城系统!
vue.js·spring boot·uni-app
2501_915921431 天前
没有Mac如何完成iOS 上架:iOS App 上架App Store流程
android·ios·小程序·https·uni-app·iphone·webview
玩代码的菜鸟1 天前
uniapp类似抖音视频滑动
uni-app
默魔2 天前
uniapp 微信小程序点击开始倒计时
微信小程序·小程序·uni-app
shmily ....2 天前
医疗预约系统中的录音与图片上传功能实现:Vue3+Uniapp 实战
uni-app
小阿技术2 天前
uniapp制作一个个人页面
uni-app
小阿技术2 天前
uniapp制作一个视频播放页面
uni-app
小周同学:3 天前
uni-app获取手机当前连接的WIFI名称
智能手机·uni-app