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
					}
				}
相关推荐
阿伟来咯~7 分钟前
一些 uniapp相关bug
uni-app·bug
瑶琴AI前端4 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
mosen8684 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
尚梦12 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
尚学教辅学习资料19 小时前
基于SSM+uniapp的营养食谱系统+LW参考示例
java·uni-app·ssm·菜谱
Bessie23419 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
qq22951165021 天前
小程序Android系统 校园二手物品交换平台APP
微信小程序·uni-app
qq22951165022 天前
微信小程序uniapp基于Android的流浪动物管理系统 70c3u
微信小程序·uni-app
qq22951165022 天前
微信小程序 uniapp+vue老年人身体监测系统 acyux
vue.js·微信小程序·uni-app
摇头的金丝猴2 天前
uniapp vue3 使用echarts-gl 绘画3d图表
前端·uni-app·echarts