小程序tab欄切換詳解

一、tab欄的介紹

tab欄在小程序中扮演着十分重要的角色。它被置於小程序頁面的最底部，是一組提供了快捷切換小程序不同功能頁面的按鈕。雖然tab欄位置相對固定，但可以通過設置選中狀態和圖標以進行自定義樣式。

二、tab欄的實現

1. 使用原生組件

    
<view class="container">
  <view class="page">
    <view class="body">
      <view class="tabs">
        <view class="tab-item {{active==0?'active':''}}" bindtap="changeTab" data-index="0">首頁
        <view class="tab-item {{active==1?'active':''}}" bindtap="changeTab" data-index="1">發現
        <view class="tab-item {{active==2?'active':''}}" bindtap="changeTab" data-index="2">我的
      </view>
    </view>
  </view>
</view>
    

通過使用原生組件view，你可以輕易地實現tab欄。其中類名tab-item是代表每一個tab項，在綁定點擊事件changeTab時使用data-index來獲取當前點擊的tab項的下標，在函數changeTab中進行處理後再更新active的狀態來達到點擊切換頁面的效果。

2. 使用weui組件

  
<view class="container">
  <view class="page">
    <view class="body">
      <view class="weui-tab">
        <block wx:for="{{tabs}}" wx:key="title">
          <navigator url="{{item.url}}" class="weui-tabbar__item {{item.active?'weui-bar__item_on':''}}" hover-class="weui-bar__item_on" data-index="{{index}}">
            <image src="{{item.icon}}" class="weui-tabbar__icon"/>
            <text class="weui-tabbar__label">{{item.title}}
          </navigator>
        </block>
      </view>
    </view>
  </view>
</view>
  

使用weui組件也能輕鬆實現tab欄，weui提供的weui-tabbar組件使得tab欄更加美觀，但相對原生組件較為複雜。需要將tab欄頁面信息通過js引入進來，並在js文件中實施與原生組件相同的功能。

三、tab欄的優化

1. 良好的用戶體驗

當tab欄只有兩個選項時，點擊切換沒有變化，用戶無法感知到當前選項，這時候我們可以新建一個“默認”頁面，通過設置默認選項，來改善用戶體驗。

2. tab欄內部滾動

當tab欄項過多時，可將標籤項設置在一個固定寬度且可滾動的容器內，用戶通過左右滑動來滑動tab項。

  
<view class="container">
  <scroll-view class="scroll-tab" scroll-x="true">
    <view class="tab-list">
      <view class="tab-item {{active==0?'active':''}}" bindtap="changeTab" data-index="0">首頁
      <view class="tab-item {{active==1?'active':''}}" bindtap="changeTab" data-index="1">發現
      <view class="tab-item {{active==2?'active':''}}" bindtap="changeTab" data-index="2">我的
      <view class="tab-item {{active==3?'active':''}}" bindtap="changeTab" data-index="3">動態
      <view class="tab-item {{active==4?'active':''}}" bindtap="changeTab" data-index="4">消息
      <view class="tab-item {{active==5?'active':''}}" bindtap="changeTab" data-index="5">設置
    </view>
  </scroll-view>
</view>

  

3. 自定義tab欄樣式

使用CSS樣式來自定義tab欄中的選中狀態和未選中狀態的樣式，可以使tab欄在UI設計上更加美觀，給用戶更好的體驗。

  
.tab-item {
  font-size: 25rpx;
  color: #808080;
  display: inline-block;
  vertical-align: top;
  width: 25%;
  text-align: center;
  height: 100%;
  line-height: 80rpx;
}

.tab-item.active {
  color: #18D160;
}
  

四、tab欄的展開

在web應用中，我們常見到由三個橫向杠組成的“摺疊”按鈕，通過點擊摺疊按鈕，展開頁面中的更多菜單欄。在小程序中也可以通過類似的方式，實現tab欄的展開。

  
<view class="container">
  <scroll-view class="scroll-tab" scroll-x="true">
    <view class="tab-list">
      <view class="tab-item {{active==0?'active':''}}" bindtap="changeTab" data-index="0">首頁
      <view class="tab-item {{active==1?'active':''}}" bindtap="changeTab" data-index="1">發現
      <view class="tab-item {{active==2?'active':''}}" bindtap="changeTab" data-index="2">我的
      <view wx:if="{{isExpanded}}" class="tab-item {{active==3?'active':''}}" bindtap="changeTab" data-index="3">動態
      <view wx:if="{{isExpanded}}" class="tab-item {{active==4?'active':''}}" bindtap="changeTab" data-index="4">消息
        <view class="tab-item more {{isExpanded?'expanded':''}}" bindtap="switchExpanded">
          <image src="/images/icon-arrow.png" class="more-icon {{isExpanded?'unfolded':''}}" mode="aspectFit"/>
          <text>{{isExpanded?'收起':'更多'}}
        </view>
    </view>
  </scroll-view>
</view>
  

通過判定變量isExpanded來控制tab欄的展開狀態，當isExpanded為true時，則展開更多的tab欄，否則則只顯示部分tab欄。

五、總結

通過以上的介紹和演示，相信大家對小程序tab欄切換有了更深層次的理解和應用。在實際開發中，我們可以根據需求和實際的業務場景進行選取，並結合當前的UI設計和用戶體驗，打造最佳的tab欄。