菜鸟读文档-Vant Weapp-8(弹性tabbar栏的构建)

dulltackle
1,635 阅读4分钟

正文

本以为进入了页面弹性布局篇, 自定义 tabbar 栏相关的内容可以先告一段落了, 可没想到, 现在首先要解决的问题就是实现自定义 tabbar 栏的弹性布局XD

固定的 tabbar 高度

如下两张图所示:

  • iphone 6/7/8

  • iphone xs max

从图中我们可以看出: 当屏幕大小随着机型改变时, 自定义 tabbar 栏的高度为固定的50 px, 这显然不符合我们弹性布局的要求

解决方法

页面的构成

首先我们来分析一下此时页面的构成, 如下图所示

从图中可以看出, 从上往下依次为: navigation, page 和 tabbar. 由于我们没有使用自定义 navigation 栏, 因此, 我们只需要处理 page 和 tabbar 二者自身的弹性布局和相互之间的匹配即可

由于 page 和 tabbar 的父元素即为视口, 所以此处我们选择使用 vh(相对视口高度) 来实现 page 和 tabbar 的弹性布局

注意, 这里有一个小细节:

  • 不使用自定义 navigation 栏, 视口 = 整个屏幕 - navigation 栏
  • 使用自定义 navigation 栏时, 视口 = 整个屏幕

高度的设定

由于我没有工业开发经验, 我并不知道设计师会怎样设置 page 和 tabbar 二者的比例, 所以就想当然地用9 : 1了, 如果这样不合适, 希望大家可以多多指教:)

设置 page

由于每个页面都会涉及到 page, 我推荐在项目的 app.wxss 中对 page 进行全局设置

/* app.wxss */
page {
  height: 90vh;
  background-color: #9DE7FF;
}
设置 tabbar

因为我们是基于 Vant Weapp 进行二次封装得到的自定义 tabbar 栏, 所以我们首先来查看 Vant Weapp 文档中与样式覆盖相关的内容

从文档中可以看出, Vant Weapp 共提供了三种修改组件样式的方法, 分别是:

  • 解除样式隔离
  • 使用外部样式类
  • 使用 CSS 变量

对于上述三种方法, 我认为, 应当首先考虑使用外部样式类, 如果无法解决问题, 再使用解除样式隔离(因为我个人并不是太喜欢这种方法, 感觉侵入性稍微有一点强), 而使用 CSS 变量作为用于主题定制的工具, 用在单一组件上感觉有点大材小用了

样例

这里我提供一个使用外部样式类实现弹性 tabbar 栏的思路

首先我们查看 tabbar 组件的相关文档, 但发现该组件并没有开放外部样式类, 难道一开始就要使用解除样式隔离了吗...

但经过我的测试发现, 很多组件都开放的一个外部样式类: custom-class 根节点样式类, tabbar 组件实际上也是开放的, 可以通过它和 vh 实现弹性自定义 tabbar 栏外框

如上图所示, tabbar 栏外框的高度实现了弹性适应

但仅有 tabbar 栏的外框实现弹性布局还不够, tabbar 栏内部的文字和图标的大小仍然是固定的

  • 文字

    tabbar-item 和 tabbar 一样, custom-class 根节点样式类实际上也是开放的, 而且 font-size 属性为继承属性, 在根节点上设置, 内部元素若不特殊设置, 文字大小将会继承父元素

  • 图标

    由于 tabbar-item 开放了图标的 slot 插槽, 我们直接利用 Vant Weapp 的 icon 组件进行替换, 然后用其 size 接口即可实现弹性图标大小

以下是基于前几期文章中自定义 tabbar 栏实现的弹性 tabbar 栏

  • index.wxml

    <van-tabbar
  custom-class="tabbar"
  active="{{ active }}"
  bind:change="onChange"
>
  <block wx:for="{{ list }}" wx:key="text">
    <van-tabbar-item
      custom-class="tabbar-item"
    >
      <!-- 注意要在 json 中引入 icon -->
      <!-- icon 插槽和 icon-active 插槽都要使用 -->
      <van-icon
        slot="icon"
        name="{{ item.icon }}"
        size="36rpx"
      />
      <van-icon
        slot="icon-active"
        name="{{ item.icon }}"
        size="36rpx"
      />
      {{ item.text }}
    </van-tabbar-item>
  </block>
</van-tabbar>

  • index.wxss

    .tabbar {
  height: 10vh !important;
  font-size: 100px !important;
}

.tabbar-item {
  /* 因为不知道为什么 rem 没有正常工作, 暂时使用rpx */
  font-size: 28rpx !important;
}

以下是实现弹性布局后的 tabbar 栏:

  • iphone 6/7/8

  • iphone xs max

预告

具体组件弹性布局

在实现了页面整体弹性布局之后, 在下一期, 我们将聚焦具体组件的弹性布局实践:)

avatar
文章
阅读
粉丝