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
					}
				}
相关推荐
遗憾随她而去.1 小时前
uniapp 中使用路由导航守卫,进行登录鉴权
前端·uni-app
牧杉-惊蛰5 小时前
uniapp微信小程序css中background-image失效问题
css·微信小程序·uni-app
Little_Code13 小时前
uniapp 使用ffmpeg播放rtsp
ffmpeg·uni-app·rtsp
儿歌八万首14 小时前
uniapp 和原生插件交互
uni-app·交互
前端 贾公子1 天前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
源码_V_saaskw10 天前
宇鹿家政服务系统小程序ThinkPHP+UniApp
微信小程序·小程序·uni-app·微信公众平台
xw510 天前
支付宝小程序IDE版本迭代异常
uni-app·支付宝
!win !10 天前
支付宝小程序IDE版本迭代异常
uni-app·支付宝小程序
xw510 天前
抖音小程序支付错误码141211
uni-app·抖音小程序
好好的哦10 天前
抖音小程序支付错误码141211
小程序·uni-app