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;

}

}

相关推荐
JoJo_Way几秒前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家31 分钟前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689971 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽2 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头2 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全3 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing3 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆3 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding4 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js