uniapp在pages.json中配置原生右上角图标

"app-plus": {
					"titleNView": {
						"backgroundImage": "./static/system/bar.png",
						"type": "default",
						"buttons": [{
							"fontSrc": "/static/iconfont1.ttf",
							"text": "\ue600",
							"fontSize": "25",
							"color": "#08BBC5",
							"float": "right",
							"width": "40px",
							"background": "rgba(0,0,0,0)"
						}]
					}
				}

页面部分：

<!-- 导航栏添加按钮弹出界面 -->

<view ref="modal" @click.stop class="arrivalNavigation" v-if="showAddButton">

<view class="d4"></view>

<view class="sideNavigation">

<view :class="{'noauth':$utils.getNoAuth(this.getKey(),'')}" class="ul" @click="addBoss()">

<u-icon color="#333333" name="plus"></u-icon><text class="item">&nbsp;&nbsp;加老板</text>

<view class="liBottomBorder"></view>

</view>

<view :class="{'noauth':$utils.getNoAuth(this.getKey(),'')}" class="ul" @click="addManager()">

<u-icon color="#333333" name="plus"></u-icon><text class="item">&nbsp;&nbsp;加管理</text>

<view class="liBottomBorder"></view>

</view>

<view class="liBottomBorder"></view>

<view :class="{'noauth':$utils.getNoAuth(this.getKey(),'00050001')}" class="ul" @click="addSquad()">

<u-icon color="#333333" name="plus"></u-icon><text class="item">&nbsp;&nbsp;加班组</text>

<view class="liBottomBorder"></view>

</view>

<view class="liBottomBorder"></view>

<view :class="{'noauth':$utils.getNoAuth(this.getKey(),'00050002')}" class="ul" @click="addSubcontracting()">

<u-icon color="#333333" name="plus"></u-icon><text class="item">&nbsp;&nbsp;加分包</text>

<view class="liBottomBorder"></view>

</view>

</view>

</view>

script部分：(与data同级)

onNavigationBarButtonTap(e) {

const index = e.index;

console.log(e);

this.showEditButton = false;

if (this.showAddButton) {

this.showAddButton = false

} else {

this.showAddButton = true;

}

}

css部分

//从这里开始是弹出框的样式 不需要搜索框的 前面样式都不用加

.arrivalNavigation {

width: 250rpx;

//

position: fixed;

right: 0rpx;

z-index: 99;

top: 0rpx;

/* #ifdef H5 */

margin-top: 88rpx;

/* #endif */

.sideNavigation {

width: 248rpx;

background-color: #ffffff;

font-size: $uni-font-size-lg;

color: $title-color;

border-radius: 10rpx;

text-align: center;

.ul {

display: flex;

flex-direction: row;

align-items: center;

justify-content: center;

position: relative;

}

.item {

height: 95rpx;

text-align: center;

line-height: 95rpx;

font-size: 28rpx;

}

.liBottomBorder {

position: absolute;

bottom: 0;

right: 0;

left: 0;

height: 2rpx;

-webkit-transform: scaleY(0.5);

transform: scaleY(0.5);

background-color: #F2F2F2;

}

}

.d4 {

// position: absolute;

// left: 140rpx;

width: 0;

height: 0;

margin-left: 180rpx;

margin-top: -10rpx;

border-width: 10rpx;

border-style: solid;

border-color: transparent #ffffff transparent transparent;

transform: rotate(90deg);

/*顺时针旋转90°*/

}

}

.card-row {

display: flex;

padding: 20rpx 30rpx;

flex-direction: row;

align-items: center;

.card-row-item {

margin-left: 30rpx;

flex: 1;

}

}