1. html
<u-navbar :is-back="true"
back-icon-color="#ffffff"
:title="titleName"
:background="background"
:border-bottom="false"
title-color="#ffffff"
id="navbar">
</u-navbar>
<view class="tabs" :style="{top: navbarHeight + 'px' }">
悬浮吸顶html
</view>
2.js
<script>
import navBarHieght from '@/common/utils/navBarHeight.js'
export default {
mixins: [navBarHieght],
}
</script>
3. mixin
/**
* 顶部状态量 + 顶部导航栏高度获取
*/
export default {
data() {
return {
navbarHeight: Number
}
},
onReady() {
// #navbar为NavBar组件设置的id
let info = uni.createSelectorQuery().select('#navbar')
info
.boundingClientRect((data) => {
this.navbarHeight = data.height
})
.exec()
}
}
uniapp 吸顶mixin
最新推荐文章于 2024-06-13 19:39:22 发布