小程序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栏。