使用组件
问题描述
在使用NavBar组件后,其顶部状态栏和顶部导航栏会在大部分机型下表现为高度64px
,在某些特殊机型下会表现为高度88px
(如iPhone X)。
页面内使用了uView的tabs
标签组件,配合Swiper
轮播图组件作为可轮播切换的商品列表页。
tabs
组件要求需要吸顶,这就引出了问题,因为使用到的组件为外部引入,对于其内部样式的修改,需要通过获取(顶部状态栏 + 顶部导航栏)的高度后重新设置吸顶的高度。
解决方案
(顶部状态栏 + 顶部导航栏)的高度几乎所有页面适用,所以写在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()
}
}
在需要使用到navbarHeight
的页面中引入mixin后,针对无法通过js修改外部引入组件样式的场景,想了半天最终是在组件的外部包裹多一层view
:
<!-- 对 uni-nav-bar组件 进行二次封装的nav组件 -->
<demo-navbar
left-icon="back"
status-bar
fixed
:title="navBarTitle"
id="navbar"
></demo-navbar>
<!-- tab栏区域 -->
<view class="tabs" :style="{ top: navbarHeight + 'px' }">
<u-tabs
active-color="rgb(42,161,223)"
:list="list"
:current="current"
@change="change"
></u-tabs>
</view>
吸顶样式很简单:
.tabs {
position: sticky;
z-index: 999;
}