uniapp 微信小程序自定义胶囊/头部

一枚问题很多的小小码农

已于 2024-04-20 15:52:06 修改

阅读量450

点赞数 3

文章标签： uni-app 微信小程序小程序 uniapp

于 2024-04-20 15:49:34 首次发布

本文链接：https://blog.csdn.net/weixin_49399187/article/details/138001523

版权

本文介绍了如何在微信小程序中使用HTML、CSS和JavaScript实现一个自定义胶囊组件，通过获取屏幕信息动态调整胶囊的样式，包括高度和位置布局。

摘要由CSDN通过智能技术生成

学习内容：微信小程序自定义胶囊

废话不多说，直接上代码

HTML：

<template>
	<view class="container">
		<view class="allHead" :style="{height:topTitBox+'px'}">
			<view class="title" :style="{height:nHeight+'px',marginTop:phoneInfo.statusBarHeight+'px'}">
				标题
			</view>
		</view>
	</view>
</template>

script：

<script>
	export default {
		data() {
			return {
				phoneInfo: uni.getSystemInfoSync(),
				jnInfo: uni.getMenuButtonBoundingClientRect(),
				// 整体盒子高度
				topTitBox: 0,
				// 平行胶囊高度
				nHeight: 0,
			}
		},
		onLoad() {
			// this.jnInfo.top - this.phoneInfo.statusBarHeight 胶囊上面的空白-目的是胶囊下面也有相应高度空白
			this.topTitBox = this.jnInfo.top - this.phoneInfo.statusBarHeight + this.jnInfo.bottom;
			// (this.jnInfo.top - this.phoneInfo.statusBarHeight) * 2 目的是计算出上下高度 + 胶囊本身高度
			this.nHeight = this.jnInfo.height + (this.jnInfo.top - this.phoneInfo.statusBarHeight) * 2
		}
	}
</script>

css：

<style lang="scss">
	.container {
		width: 100%;
		.allHead {
			width: 100%;
			background: rgba(#ff0000,1);
			position: fixed;
			top: 0%;
			z-index: 90;
			.title {
				width: 100%;
				background: rgba(#ffffff, .4);
				display: flex;
				align-items: center;
				justify-content: center;
				color: #ffffff;
			}
		}
	}
</style>