使用LinUI的Tabs组件实现电商小程序分类页面

分类页面可谓是电商小程序的常客，项目中难免会与它打交道，而选项卡又是分类页面比较重要的一部分。本文就就介绍一下如何使用林间有风团队开发的小程序组件库中的tabs组件优雅快速的开发一个分类页面。

先上一个效果图，供各位参考：

Tabs用法

有关tabs组件的属性和事件具体参考 tabs文档 ，本文就不过多赘述。主要讲述下外部样式类的修改。

更改Tabs高度

为了使tabs组件应用更多的使用场景,组件在封装时未设置高度，高度继承自父级元素。

不过此处存在一个问题，每个选项卡会均分容器的高度，因此此处需加入一个外部样式类，固定选项卡的高度。同时选项卡的激活与未激活状态的样式也要按照设计图进行一下修改。

<view style="height:100vh">
    <l-tabs placement="left" l-class-active="active commom" l-class-inactive="inactive commom" l-class-header="header" l-class-line="line">
        <l-tabpanel tab="美食" key="one" slot="one">
        </l-tabpanel>
        <l-tabpanel tab="品牌" key="two" slot="two">
        </l-tabpanel>
        <l-tabpanel tab="接口" key="three" slot="three">
        </l-tabpanel>
  </l-tabs>
</view>
复制代码

.commom {
  max-height: 60rpx !important;
}

.line {
  background-color: #ad0e11 !important;
  width: 10rpx !important;
  border-radius: 0 !important;
}

.active {
  color: #ad0e11 !important;
}

.inactive {
  background-color: #fff !important;
  color: #7a7a7a !important;
}
复制代码

Tabs内容

代码处理到这个地方，分类页面已经有了一个雏形。接下来咱们把内容补充一下。

通常来讲，分类的内容是使用scroll-view组件,可是scroll-view使用时须要对这个组件传入一个高度。若是上方没有搜索栏的话，这个高度是显而易见的，设置height:10vh就能够了。不过加上搜索栏以后，分类内容的高度便没法肯定。此处可使用wx.getSystemInfoSync()获取屏幕可用高度，再经过wx.createSelectorQuery().select().boundingClientRect()获取到搜索栏的高度，二者相减便可获得分类内容所需的高度。

<view style="height:100rpx">
  <!-- 搜索栏 -->
</view>
<view style="height:{{categoryHeight}}px">
  <l-tabs placement="left" l-class-active="active commom" l-class-inactive="inactive commom" l-class-header="header" l-class-line="line">
    <l-tabpanel tab="美食" key="one" slot="one">
      <!-- 插槽内容 -->
      <scroll-view scroll-y style="height:{{categoryHeight}}px">
      </scroll-view>
    </l-tabpanel>
    <l-tabpanel tab="品牌" key="two" slot="two">
      <view class="tab-content">品牌</view>
    </l-tabpanel>
    <l-tabpanel tab="接口" key="three" slot="three">
      <view class="tab-content">接口</view>
    </l-tabpanel>
  </l-tabs>
</view>
复制代码

onLoad () {
    const windowHeight = wx.getSystemInfoSync().windowHeight
    wx.createSelectorQuery().select('.ipt-container').boundingClientRect((e) => {
      this.setData({
        categoryHeight: windowHeight - e.height
      })
    }).exec()
  }
复制代码

小结

LinUI组件的初衷就是为了支持更多的使用场景，组件难免有些抽象。随后关于复杂的使用状况，咱们团队也会出一些简单的教程帮助你们。但愿这篇文章能够帮助到您。

喜欢的话就给咱们的项目点个赞吧！

github: github.com/TaleLin/lin…