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