菜鸟读文档-Vant Weapp-9(tabs标签页实践)

正文

如上图所示, 通常位于页面上方的 tabs 标签页是微信小程序中一个十分常见的结构, 用于分隔内容上有关联但属于不同类别的数据集合. 本期我们将一起探究 Vant Weapp 中 Tab 标签页的使用

引入

首先我们在对应页面的 .json 文件中引入 Tab 标签页

"usingComponents": {
  "van-tab": "@vant/weapp/tab/index",
  "van-tabs": "@vant/weapp/tabs/index" 
}

然后在 .wxml 文件中输入文档中的样例

<van-tabs
  active="{{ active }}"
  border="{{ true }}"
>
  <van-tab title="标签 1">内容 1</van-tab>
  <van-tab title="标签 2">内容 2</van-tab>
  <van-tab title="标签 3">内容 3</van-tab>
</van-tabs>

效果如下

弹性 tabs 栏

• iphone 6

  

• iphone x

  

如上图所示, 我们首先遇到的问题是 tabs 栏的高度是固定的 44 px, 这显然不符合弹性布局的要求, 但 Tab 标签页文档中并没有提供设置 tabs 栏高度的接口...

解除样式隔离方法

正如我们在上期文章中讨论的一样, 当我们想要对组件进行样式设置, 但组件并未直接开放相关接口时, 我们首先会考虑使用外部样式类. 但遗憾的是, 从下述 tabs 栏的源码中我们可以看出, 这个通过 height 属性直接控制了 tabs 栏高度的 view 标签并没有开放外部样式类

<view class="{{ utils.bem('tabs__wrap', { scrollable }) }} {{ type === 'line' && border ? 'van-hairline--top-bottom' : '' }}">

此时, 按照上期文章的结论, 我们应当开始考虑解除样式隔离

我们从开发者工具中找到对应的类

并在 .wxss 文件中进行修改

.van-tabs--line .van-tabs__wrap {
  height: 200px !important;
}

但修改效果后如下图所示

可以看出, 仅仅靠上述样式只能够扩大 tabs 栏的外框, 内部各个 tab 仍然是 44 px...

我们只能在此基础上进一步深入寻找对应控制高度的类, 如下图

可以看出, 该类使用 line-height 属性控制了 tabs 栏内部各个 tab 的高度

在 .wxss 文件中进行进一步修改

.van-tabs--line .van-tabs__wrap {
  height: 200px !important;
}

.van-tab {
  line-height: 200px !important;
}

修改效果后如下图所示

可见, 此时的 tabs 栏的高度已经被成功设置了

使用 CSS 变量方法

但是, 仅仅为了设置一个 tabs 栏的高度就需要对两个 CSS 样式类进行修改, 感觉似乎有点过于啰嗦了. 在经过我的探究后, 我发现了一个基于使用 CSS 变量的方法

在此处我必须纠正我在上一期文章中的一个错误认识: 使用 CSS 变量作为用于主题定制的工具, 用在单一组件上感觉有点大材小用了

实际上这是我在仅仅看了使用 CSS 变量的简介得出的结论...

在阅读了使用 CSS 变量相关文档后, 我认为解决组件样式相关问题的方法可以这样划分:

方法	自定义程度	使用难度	可读性
使用外部样式类	中	低	高
使用 CSS 变量	低	高	中
解除样式隔离	高	中	低

而在本次的 tabs 栏高度自定义问题中, 最适合使用 CSS 变量来解决

首先从上文中的 CSS 样式类可以看出, 控制 tabs 栏的高度的 height 属性和 ling-height 属性都涉及到了 CSS 变量 var(--tabs-line-height,44px);, 正好可以用 CSS 变量来解决高度自定义问题

1. 和使用外部样式类一样, 自定义编写样式类, 只不过内容是对 CSS 变量进行设值

   .tab-height {
     --tabs-line-height: 250px;
   }
   

2. 将该类直接绑定到想要进行自定义的组件上

   <van-tabs
     class="tab-height"
     active="{{ active }}"
     border="{{ true }}"
   >
     <van-tab title="标签 1">内容 1</van-tab>
     <van-tab title="标签 2">内容 2</van-tab>
     <van-tab title="标签 3">内容 3</van-tab>
   </van-tabs>
   

如下图所示, 达到了和使用解除样式隔离同样的效果

预告

具体组件使用实践

在本期, 我们通过对 tabs 栏高度自定义问题的探讨, 引出了对使用 CSS 变量的学习, 在下期, 我们将继续学习具体组件的使用实践:)