uni-app导航栏使用自定义图标的两种方式

一是使用iconfont图标，二是自己重绘。

1.iconfont

从阿里图标库中将字体图标下载，把iconfont.ttf放入static目录中。

选择unicode，找到想要的图标

在pages.json中配置，把  后面的数字换到 \u 中就可以

通过onNavigationBarButtonTap 可以监听用户点击

onNavigationBarButtonTap(e) {
    console.log(e)
},

二、重绘

1.配置pages.json

2.

     



	
		
	
	客户详情
	
		
	

.head {
		display: flex;
		justify-content: space-between;
		padding: 0 20upx;
		box-sizing: border-box;
		background: #FFFFFF;
		color: #333;
		align-items: center;
		height: 88upx;
		position: fixed;
		top: var(--window-top);
		left: 0;
		width: 100%;
		z-index: 999;
		margin-top: var(--status-bar-height);

		.goBack {
			flex: 1;

			image {
				width: 36upx;
				height: 36upx;
				vertical-align: sub;
			}
		}

		.head_right {
			flex: 1;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			image {
				width: 46upx;
				height: 46upx;
				vertical-align: sub;
			}

			.region {
				width: 36upx;
				height: 36upx;
				vertical-align: sub;
				margin-right: 10upx;
			}
		}

		.head_title {
			font-weight: 700;
			font-size: 32upx;
			flex: 1;
			text-align: center;
		}
	}

实现