固定定位顶部组件,自适应效果以及解决定位脱离文档流布局

秒速五厘米 2021-07-24 20:43 740阅读 0赞

解决定位脱离文档流布局
    	在产生了固定定位的组件中,再添加未脱离文档流的容器,高度为定位内容的高度,则后续元素布局并不会受定位影响

代码示例:

<template>
    	<view class='n-c'>
    		
    		<view class='n-n'>
    			<view :style="{height: statusBarHeight+'px'}"></view>
    			<view class="n-m" :style="{height:barHeight+'px',width:searchWidth+'px'}">
    				<view class='n-i' :style="{height:(barHeight-barGap*2)+'px'}">
    					
    					<uni-icons type="search" class='n-s'></uni-icons>
    					<view class='n-p'>uniapp、vue、html</view>
    				</view>
    			</view>
    
    		</view>
    		<view :style="{height: statusBarHeight+'px'}"></view>
    		<view :style="{height:barHeight+'px'}"></view>
    	</view>
    </template>
    
    <script>
    	export default { 
    		data() { 
    			return { 
    				statusBarHeight:20,
    				barHeight:45,
    				barGap:10,
    				searchWidth:375
    			};
    		},
    		created()
    		{ 
    			let sysinfo=uni.getSystemInfoSync();
    			this.statusBarHeight=sysinfo.statusBarHeight;
    			
    			//#ifndef H5 || APP-PLUS
    				let menu=uni.getMenuButtonBoundingClientRect();
    				const barGap=menu.top-this.statusBarHeight;
    				let barHeight=menu.bottom-this.statusBarHeight+menu.top-this.statusBarHeight;
    				this.barHeight=barHeight;
    				this.barGap=barGap;
    				this.searchWidth=menu.left;
    			//#endif
    
    		}
    	}
    </script>
    
    <style lang="scss">
    	@import '../../common/css/icons.css';
    	.n-c{ 
    		
    		.n-n{ 
    			width: 100%;
    			background-color:#F26A6B;
    			box-sizing: border-box;
    			display: flex;
    			flex-direction: column;
    			justify-content: center;
    			
    			position: fixed;
    			top:0;
    			left:0;
    			z-index: 99;
    			.n-m{ 
    				display: flex;
    				align-items: center;
    				width: 100%;
    				padding: 0 10px;
    				box-sizing: border-box;
    				.n-i{ 
    					background-color: white;
    					height: 32px;
    					line-height: 30px;
    					border-radius:20px;
    					width: 100%;
    					display: flex;
    				
    					.n-s{ 
    						height: 10px;
    						width: 10px;
    						padding: 0 15px;
    					}
    					.n-p{ 
    						color:#ccc;
    						font-size: 12px;
    					}
    				}
    			}
    
    		}
    
    	}
    </style>