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
					}
				}
相关推荐
吴传逞16 小时前
记一次uniapp+nutui-uniapp搭建项目
uni-app
雪芽蓝域zzs18 小时前
uni-app倒计时公共组件 封装,倒计时组件
uni-app
2501_9159184121 小时前
iOS 开发全流程实战 基于 uni-app 的 iOS 应用开发、打包、测试与上架流程详解
android·ios·小程序·https·uni-app·iphone·webview
黑马源码库miui5208621 小时前
JAVA同城打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码
java·微信·微信小程序·小程序·uni-app
清风细雨_林木木1 天前
uni-app 和 uni-app x 的区别
uni-app
iOS阿玮1 天前
期待iOS开发者加入,共同抵制“苹果税”反垄断招募令!
uni-app·app·apple
普通网友1 天前
支持二次开发的代练App源码:订单管理、代练监控、安全护航功能齐全,一站式解决代练护航平台源码(PHP+ Uni-app)
安全·uni-app·php
蜕变菜鸟1 天前
uview使用u-popup组件当开启遮罩层禁止下层页面滚动。uniapp弹框禁止页面上下滚动。
uni-app
吴传逞3 天前
记一次uniapp微信小程序开发scss变量失效的问题
微信小程序·uni-app·scss
2501_915921433 天前
小团队如何高效完成 uni-app iOS 上架,从分工到工具组合的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview