小程序自定义顶部组件uniapp
customNav.vue
<template>
<view>
<view class="navbar-wrapper" :style="{
paddingTop: statusBarHeight,
paddingBottom: paddingBottom+'px',
backgroundColor: `rgba(255,255,255,${topOpacity})`,
}">
<view :style="{height: titleHeight+'px',lineHeight: titleHeight+'px',color: topOpacity > 0.9 ? '#000' : ''}">
<view v-if="$slots.default">
<slot></slot>
</view>
<text v-else> {{ title }}</text>
</view>
</view>
<view v-if="isBlockHeight" :style="{
height: totalHeight+'px'
}"></view>
</view>
</template>
<script>
export default {
name: 'customNav',
props: ['title','isBlockHeight'],
data() {
return {
// 像素单位
pxUnit: 'px',
// 默认状态栏高度
statusBarHeight: 'var(--status-bar-height)',
// 微信小程序右上角的胶囊菜单宽度
rightSafeArea: 0,
titleHeight: 40,
totalHeight: 0,
topOpacity: 0,
paddingBottom: 0
}
},
mounted() {
const px = this.pxUnit
// #ifndef H5
// 获取窗口信息
const windowInfo = uni.getWindowInfo()
this.statusBarHeight = windowInfo.statusBarHeight
// #endif
// #ifdef MP-WEIXIN
// 获取胶囊左边界坐标
const { left,top,height } = uni.getMenuButtonBoundingClientRect()
const info = uni.getSystemInfoSync()
this.statusBarHeight = top;
this.titleHeight = height;
// 计算胶囊(包括右边距)占据屏幕的总宽度：屏幕宽度-胶囊左边界坐标
this.rightSafeArea = windowInfo.windowWidth - left + px
this.paddingBottom = top-info.statusBarHeight;
// #endif
// #ifndef H5
this.totalHeight = this.titleHeight + this.statusBarHeight + this.paddingBottom;
// #endif
// #ifdef H5
this.totalHeight = this.titleHeight
// #endif
this.statusBarHeight = this.statusBarHeight+'px';
},
methods:{
pageScroll(scrollTop){
let topOpacity = scrollTop / this.totalHeight
if (scrollTop < 10) {
topOpacity = 0
} else if (topOpacity >= 1) {
topOpacity = 1
}
this.topOpacity = topOpacity;
}
}
}
</script>
<style scoped>
.navbar-wrapper {
box-sizing: border-box;
background-color: transparent;
position: relative;
font-size: 16px;
font-weight: 700;
color: #fff;
text-align: center;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
</style>使用
<template>
<customNavBarVue ref="customNavRef" title="拾光机"></customNavBarVue>
</template>
<script>
let timer = null
export default {
data() {
return {}
},
onPageScroll(e){
this.$refs.customNavRef.pageScroll(e.scrollTop)
},
methods: {}
</script>
<style lang="scss" scoped>
</style>原文地址：https://blog.csdn.net/weixin_45638909/article/details/144367959
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！