uniapp中scrollview配合swiper实现一个简单的tab标签页

<template>
  <view class="tab-container">
    <!-- Tab 标签滚动容器 -->
    <scroll-view scroll-x="true" class="tab-scroll" scroll-with-animation="true">
      <view class="tab-list">
        <view
          v-for="(item, index) in tabs"
          :key="index"
          class="tab-item"
          :class="{ active: currentIndex === index }"
          @click="changeTab(index)"
        >
          {{ item.name }}
        </view>
      </view>
    </scroll-view>

    <!-- 内容区域 -->
    <swiper
      :current="currentIndex"
      class="swiper-content"
      @change="onSwiperChange"
      :duration="300"
      scroll-x="true"
    >
      <swiper-item v-for="(item, index) in tabs" :key="index">
        <view class="swiper-item-content">
          <!-- 内容区域的具体内容 -->
          <view>{{ item.name }} Content</view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>
<script lang="ts">
import { ref } from 'vue';

export default {
  setup() {
    const tabs = ref([
      { name: 'Tab 1' },
      { name: 'Tab 2' },
      { name: 'Tab 3' },
  { name: 'Tab 4' },
  // { name: 'Tab 5' },
  // { name: 'Tab 6' },
  // { name: 'Tab 7' },
  // { name: 'Tab 8' },
  // { name: 'Tab 9' },
      // ... 更多 Tab
    ]);

    const currentIndex = ref(0);

    const changeTab = (index: number) => {
      currentIndex.value = index;
    };

    const onSwiperChange = (e: any) => {
      currentIndex.value = e.detail.current;
    };

    return {
      tabs,
      currentIndex,
      changeTab,
      onSwiperChange,
    };
  },
};
</script>
<style>
.tab-container {
  width: 100%;
}

.tab-scroll {
  white-space: nowrap;
  overflow-x: auto;
}

.tab-list {
  display: flex;
}

.tab-item {
  padding: 10px 20px;
  cursor: pointer;
  position: relative;
}

.tab-item.active {
  color: #f10606;
}

.swiper-content {
  height: 300px; /* 设置内容区域的高度 */
}

.swiper-item-content {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
}
.active::after {
content: '';
position: absolute;
/* background-image: url(../../static/checkDetails/action.png); */
background-size: 100%;
background: #f00;
background-repeat: no-repeat;
width: 40px;
height: 4px;
top: 38px;
left: 30px;
}
</style>

基本思路

1横向滚动的动画效果主要依靠scrollview自带的croll-with-animation="true"来设置

2 而底部下划线则是给当前激活的tab设置伪元素来实现

原文地址：https://blog.csdn.net/baidu_41601048/article/details/144161775

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！