Tabs标签页

一般来说小程序除了navigationBar和tabBar之外还会有tabs标签页，tabs的作用主要用来分隔内容上有关联但属于不同类别的数据集合。如下图所示，在每日优鲜小程序的首页，通过tabs标签页，使得用户在进入首页后可以切换到不同的分类。从某种意义上来说，tabs标签页起到了二级导航的作用。

tab

当我们在设计开发小程序的时候，如果某个页面要展示的内容较多，且可以归类为几种类别，便可以使用tabs标签页。那么该如何实现呢?话不多说，让我们献上代码先～

tabs.xml

<view class="tabs_header">
    <view id="{{index}}" class="tabs_header_item {{tabIndex == index ? 'active' : 'normal'}}" bindtap="changeTab" wx:for="{{tabs}}" wx:key="{{index}}">
      <view>随着tabs切换显示不同内容</view>
    </view>
</view>

tabs.js

data: {
    tabs: ['热卖', '会员特价', '优鲜菜场', '水果', '蔬菜', '肉蛋'], // 导航选项文字
    tabIndex: '0'  // 当前导航选项的索引
  },

  changeTab: function(event) {
    this.setData({
      tabIndex: event.target.id
    })
    // 通过event.target.id即可判断tabs标签页下方的内容
    ...
  },

Tabs标签页的实现主要是通过事件让小程序的视图层和逻辑层之间进行通信。事件可以将用户的行为反馈到逻辑层进行处理，就tabs标签页来说，用户点击tab的事件反馈到逻辑层，逻辑层处理数据，改变页面数据并重新渲染。此外，事件对象还可以携带额外的信息，比如上面代码中使用的id。当需要传递的信息较多时，我们可以使用dataset。下面我们就详细了解一下小程序的事件机制。
事件分为两种：冒泡事件和非冒泡事件，前者会向父节点传递而后者不会。在小程序中，常用的几种事件比如：tap(手指触摸后离开）、longpress(长按)等都是冒泡事件。
那如果我们不想让冒泡事件冒泡该如何处理呢？小程序提供了两种事件绑定方式：bind+事件名和catch+事件名。bind事件绑定不会阻止冒泡事件向上冒泡而catch事件绑定可以阻止冒泡事件向上冒泡。
当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。通过该事件对象，我们可以给逻辑层传递数据。基础事件对象具有以下属性：type(String)
timeStamp(Integer)
target(Object)
currentTarget(Object)
其中target对象具有属性id(String), tagName(String), dataset(Object)，id是事件源组件的id，tagName是事件源组件的类型，dataset则是事件源组件上由data-开头的自定义属性组成的集合。currentTarget对象与target对象具有相同的属性，不同的是currentTarget对应的是当前组件。
至此，Tabs标签页介绍完毕了，通过介绍Tabs标签页，我们顺便了解了小程序的事件机制。总结以下，通过事件我们可以实现逻辑层和视图层的交互，使得页面能够及时反馈用户的操作。