uniapp组件之tab选项卡滑动切换功能实现

下面是详细讲解“uniapp组件之tab选项卡滑动切换功能实现”的完整攻略。

下面是详细讲解“uniapp组件之tab选项卡滑动切换功能实现”的完整攻略。

概述

tab选项卡是开发中经常使用的一个组件，可以实现快速的切换页面。在uniapp中，我们可以使用 uni-ui 组件库提供的 uni-tabs 来实现tab选项卡。但是，如果我们需要实现tab选项卡的滑动切换功能，就需要进行一些自定义操作。

本攻略将详细讲解如何使用uniapp和自定义样式实现tab选项卡的滑动切换功能。

实现步骤

1. 引入外部样式文件

首先，在你的uniapp项目中，创建一个新的样式文件，例如 style.css，并在你需要使用tab选项卡的页面的 pages.json 文件中添加外部样式文件路径：

{
  "usingComponents": {
    "uni-tabs": "/uni-ui/components/uni-tabs/uni-tabs",
    "uni-tab": "/uni-ui/components/uni-tab/uni-tab"
  },
  "style": {
    "styleSheet": [
      "/static/style.css"
    ]
  }
}

2. 自定义样式

在 style.css 文件中，我们需要进行以下样式设置：

.tabs-custom {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.tabs-custom-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 300%;
  height: 100%;
  transition: transform .3s ease-in-out;
}

上述样式设置将实现每个tab页面的宽度为父容器的3倍，这样在切换tab选项卡时，就可以通过改变 transform 的值实现滑动切换效果。

3. 编写模板

在 template 中，我们可以使用 v-for 循环生成若干个tab选项卡页面，并设置对应的 active 状态：

<template>
  <view class="tabs-custom">
    <uni-tabs :current.sync="current" @change="handleTabChange">
      <uni-tab v-for="(item, index) in tabs" :key="index" :title="item.title">
        <view :class="['tabs-custom-content', index === current ? 'active' : '']">
          {{ item.content }}
        </view>
      </uni-tab>
    </uni-tabs>
  </view>
</template>

注意，我们在 tabs-custom-content 样式中添加了 active 类，用于在切换tab选项卡时，改变 transform 值，实现滑动效果。

4. 编写逻辑代码

最后，在页面的 script 中，我们需要编写逻辑代码。我们需要定义 tabs 数组，用于存储所有tab选项卡的相关信息，例如：

tabs: [
  {
    title: 'Tab 1',
    content: 'This is tab 1'
  },
  {
    title: 'Tab 2',
    content: 'This is tab 2'
  },
  {
    title: 'Tab 3',
    content: 'This is tab 3'
  }
],

其中，每个tab选项卡包含两个属性： title 和 content，分别表示选项卡标题和内容。

接着，我们需要定义 current 变量，用于存储当前活动的tab选项卡索引：

current: 0,

最后，我们需要编写 handleTabChange 方法，用于切换tab选项卡时，改变 current 变量的值，实现滑动切换效果：

handleTabChange(e) {
  this.current = e.currentTarget.dataset.index
},

注意，我们在代码中通过 e.currentTarget.dataset.index 获取tab选项卡的索引，用于改变 current 变量的值。

示例说明

下面给出两条示例说明：

示例1：tab标题左对齐

如果你希望tab选项卡标题左对齐，可以在 style.css 中添加以下样式设置：

.uni-tabs__wrapper {
  display: flex;
  justify-content: flex-start;
}

示例2：tab选项卡带下划线

如果你希望tab选项卡标题带下划线，在 style.css 中添加以下样式设置：

.uni-tabs__nav {
  display: flex;
  border-bottom: 1px solid #e5e5e5;
}

.uni-tab {
  flex: 1;
  text-align: center;
  padding-bottom: 10px;
}

.uni-tab__title {
  position: relative;
}

.uni-tab__title::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: red;
  opacity: 0;
  transition: opacity .3s ease-in-out;
}

.uni-tab--active .uni-tab__title::before {
  opacity: 1;
}

上述样式设置中，我们为每个tab选项卡的标题添加了一个下划线，并在选中的tab选项卡标题上显示下划线。