使用组件

问题描述

在使用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()
  }}12345678910111213141516171819

在需要使用到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>1234567891011121314151617

吸顶样式很简单：

.tabs {
  position: sticky;
  z-index: 999;}