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

逃离我推掉我的手 2023-07-19 05:54 57阅读 0赞

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

# 1.iconfont #

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

![20200329225646668.png][]

选择unicode，找到想要的图标

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70 1][]

通过onNavigationBarButtonTap 可以监听用户点击

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

# 二、重绘 #

1.配置pages.json

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70 2][]

<view class="status_bar">
         <view class="top_view"></view>
    </view>
    
    <view class="head">
    	<view @click="goBack" class="goBack">
    		<image src="../../static/images/left01.png" mode=""></image>
    	</view>
    	<view class="head_title">客户详情</view>
    	<navigator url="#" class="head_right">
    		<image src="../../static/images/ashbin.png" mode=""></image>
    	</navigator>
    </view>
    <view style="width: 100%;height: 88upx;"></view>

.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;
    		}
    	}

实现

![20200329230953926.png][]

[20200329225646668.png]: /images/20230528/aa5f430c7f7e44e9a27fb07013b53656.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70]: /images/20230528/52fa36d0fcee413997c73d828e21f317.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70 1]: /images/20230528/2974e771e22544229c13485ec6bb778d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70 2]: /images/20230528/cd488bc44f084a0f8abf6a600af2df75.png
[20200329230953926.png]: /images/20230528/c31054cc96864f358c70fc809c9a9999.png