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;

}

}

相关推荐
老家的回忆1 分钟前
jsPDF和html2canvas生成pdf,组件用的elementplus,亲测30多页,20s实现
前端·vue.js·pdf·html2canvas·jspdf
半点寒12W5 分钟前
uniapp全局状态管理实现方案
前端
Vertira6 分钟前
pdf 合并 python实现(已解决)
前端·python·pdf
鹏程27 分钟前
局域网下五子棋,html+node.js实现
node.js·html
PeterJXL41 分钟前
Chrome 下载文件时总是提示“已阻止不安全的下载”的解决方案
前端·chrome·安全
hackchen1 小时前
从0到1解锁Element-Plus组件二次封装El-Dialog动态调用
前端·vue.js·elementui
君子宜耘心1 小时前
el-table虚拟列表封装
前端
黄瓜沾糖吃1 小时前
大佬们指点一下倒计时有什么问题吗?
前端·javascript
温轻舟1 小时前
3D词云图
前端·javascript·3d·交互·词云图·温轻舟
buibui1 小时前
打包一个工具类
前端