微信小程序中选项卡的例子

1. 选项卡简介

选项卡是一种常见的页面交互设计，也称为标签页。选项卡常用于多个类似页面之间的切换。用户可以通过点击选项卡来浏览不同的内容页面，不同的选项卡对应着不同的页面内容。在微信小程序中，选项卡也是一种常用的界面设计方式。

2. 微信小程序选项卡的实现

微信小程序的选项卡实现起来非常简单，只需要使用官方提供的组件即可，具体使用方法如下：

2.1 导航栏组件

微信小程序提供了一个导航栏组件 tabBar ，这个组件是整个小程序底部的选项卡，可以用于切换小程序的不同页面。下面是一个简单的使用例子：

// 在 app.json 中配置 tabBar
"tabBar": {
  "list": [{
    "pagePath": "pages/index/index",
    "text": "首页"
  }, {
    "pagePath": "pages/logs/logs",
    "text": "日志"
  }]
}

需要注意的是：

每个页面最多只能有 5 个 tabBar 项。

icon 大小限制为 40kb，建议使用 81px * 81px。

当设置 position 为 top 时，需要在相应页面的 json 里配置 backgroundColorTop 和 backgroundColorBottom。

2.2 普通选项卡组件

除了底部的导航栏组件 tabBar ，微信小程序还提供了另一种选项卡组件 tab ，这个组件可以用于切换当前页面的不同内容。下面是一个简单的使用例子：

// 在 wxml 中配置 tab
<view class="container">
  <view class="tabs">
    <view class="tab" bindtap="switchTab" data-current="0">
      <text>选项卡1</text>
    </view>
    <view class="tab" bindtap="switchTab" data-current="1">
      <text>选项卡2</text>
    </view>
    <view class="tab" bindtap="switchTab" data-current="2">
      <text>选项卡3</text>
    </view>
  </view>
  <view class="content">
    <view wx:if="{{currentTab==0}}">
      <text>这是选项卡1的内容</text>
    </view>
    <view wx:if="{{currentTab==1}}">
      <text>这是选项卡2的内容</text>
    </view>
    <view wx:if="{{currentTab==2}}">
      <text>这是选项卡3的内容</text>
    </view>
  </view>
</view>

需要注意的是：

tab 组件属于基础组件，不需要额外引入。

tab 组件只适用于当前页面的切换，不能用于切换不同页面。

currentTab 是当前选中的选项卡的下标。

选项卡的样式可以自定义。

3. 小结

选项卡是一种非常常用的页面切换方式，无论是网站还是小程序都会用到。微信小程序提供了两种选项卡组件分别是导航栏组件 tabBar 和普通选项卡组件 tab ，通过它们可以实现各种类型的选项卡效果。