uniapp 自定义头部导航

亦凉 2021-07-25 16:17 1119阅读 0赞

html  
引用需要自行更改图片路径

<view class="bac-box"></view>
    		
    		<view class="navigation-box">
    			
    			<view class="back_but" @tap="back">
    				<image src="../../static/shopping/back.png" style="width: 40upx;height: 40upx;" mode=""></image>
    			</view>
    			
    			<view class="title">
    				详情
    			</view>
    			
    			<view class="right-biao">
    				<image src="../../static/topic/diandiandian.png" style="width: 56upx;height: 18upx;" mode=""></image>
    			</view>
    		</view>

css代码

.bac-box { 
    			position: fixed;
    			top: 0;
    			width: 100%;
    			// background: linear-gradient(90deg, #FC552E 0%, #FA2E1A 100%); //渐变色的背景
    			background-color: #FFFFFF;
    			height: 70upx;
    			z-index: 1001;
    		}
    
    		//自定义导航栏 .navigation-box { 
    			position: fixed;
    			top: 70upx;
    			height: 93upx;
    			background-color: #FFFFFF;
    			width: 100%;
    			z-index: 100;
    			border-bottom: 1rpx solid #EEEEEE;
    			display: flex;
    			justify-content: space-between;
    			padding: 0upx 32upx;
    			align-items: center; //返回按钮 .back_but { 
    				width: 40upx;
    				height: 40upx;
    			}
    
    			//标题 .title { 
    				font-size: 36upx;
    				color: #333333;
    				font-weight: 500;
    			}
    			//右侧小标 .right-biao{ 
    				width: 56upx;
    				height: 18upx;
    			}
    		}

返回事件

//返回上一级
    			back() { 
    				uni.navigateBack({ 
    					delta: 1
    				});
    			},

发表评论取消回复

表情：

评论列表（有 0 条评论，1119人围观）

还没有评论，来说两句吧...

相关阅读

相关小程序自定义头部导航

![20200730112310522.png][] 首先效果图奉上，右边的胶囊按钮是自带的，我们自定义的是左边的内容（一般情况下我们是不需要自定义头部导航的，我这个是有

柔光的暖阳◎/ 2023年03月03日 05:53/ 0 赞/ 22 阅读

相关 EasyAdmin 控制器自定义方法，自定义模板头部

在对应的方法内加入下面一句： $this->layout && $this->app->view->engine()->layout(false); 完整代码类似

电玩女神/ 2022年12月13日 14:23/ 0 赞/ 433 阅读

相关 uniapp自定义导航的自定义按钮上的红点动态控制

在page.json页面写好路由 "buttons": [{ { "fontSrc": "/static/yticon.ttf",

野性酷女/ 2022年12月04日 01:14/ 0 赞/ 316 阅读

相关微信小程序---自定义头部导航栏胶囊按钮

![20210731105532912.png][] 第一步：app.json全局配置文件中，window配置项中配置navigationStyle "windo

喜欢ヅ旅行/ 2022年08月29日 05:43/ 0 赞/ 767 阅读

相关 uniapp下导航栏自定义多按钮单击事件

uniapp官方给出的函数 onNavigationBarButtonTap （监听原生标题栏按钮点击事件，参数为Object） ![Image 1][] 按钮监听函数

今天药忘吃喽~/ 2022年04月25日 07:02/ 0 赞/ 953 阅读

相关微信小程序自定义头部导航栏胶囊按钮(组件化)

效果图 ![在这里插入图片描述][20190420193749957.png] ![在这里插入图片描述][20190420193805718.png] 支持导航栏

拼搏现实的明天。/ 2022年04月24日 08:50/ 0 赞/ 1211 阅读

相关微信小程序-自定义头部导航

先展示效果： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

╰半夏微凉°/ 2022年03月11日 06:16/ 0 赞/ 390 阅读

相关微信小程序自定义头部导航栏 navigationStyle

![735803-20181009165734626-1757202850.png][] 但是有时候我们项目需求可能需要自定义头部导航栏，如下图所示： ![73580

深藏阁楼爱情的钟/ 2021年12月14日 13:49/ 0 赞/ 1097 阅读

相关 uniapp组件-uni-nav-bar自定义导航栏

例1 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

今天药忘吃喽~/ 2021年07月25日 19:21/ 0 赞/ 3000 阅读

相关 uniapp 自定义头部导航

html 引用需要自行更改图片路径 <view class="bac-box"></view>  <view

亦凉/ 2021年07月25日 16:17/ 0 赞/ 1120 阅读