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;

}

}

相关推荐
蚂蚁RichLab前端团队35 分钟前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光1 小时前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军1 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
huangql5201 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Qlittleboy1 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
Days20501 小时前
LeaferJS好用的 Canvas 引擎
前端·开源
小白菜学前端2 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿2 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
GDAL2 小时前
Knockout.js 任务调度模块详解
javascript·knockout
椒盐螺丝钉2 小时前
Vue组件化开发介绍
前端·javascript·vue.js