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

最新推荐文章于 2025-06-16 12:21:39 发布

lemontree-xy

最新推荐文章于 2025-06-16 12:21:39 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_43337481/article/details/132333940

本文介绍了如何在uniapp中通过pages.json配置原生右上角图标，并展示了一个示例，展示了在页面中添加按钮并触发相应事件的实现方式，包括导航栏的点击事件处理和弹出界面的样式设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

"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">  加老板</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">  加管理</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">  加班组</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">  加分包</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;
       }
   }