使用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…