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;

}

}

相关推荐
hj5914_前端新手3 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法3 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku3 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode3 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu3 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu3 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu3 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu3 小时前
【js篇】call() 与 apply()深度对比
前端·javascript
LuckySusu3 小时前
【js篇】addEventListener()方法的参数和使用
前端·javascript
该用户已不存在3 小时前
6个值得收藏的.NET ORM 框架
前端·后端·.net