学习内容:微信小程序自定义胶囊
废话不多说,直接上代码
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>