＜script setup lang=“ts“＞+uniapp实现轮播（swiper）效果

效果图1：

代码：

复制代码

<template>
 <view class="carousel-container">
    <!-- 姓名导航栏移至轮播上方 -->
    <view class="name-nav">
        <view
            v-for="(item, index) in personList"
            :key="index"
            :class="{ active: activeIndex === index }"
            @click="activeIndex = index"
        >
            {{ item.name }}
        </view>
    </view>

    <!-- 轮播内容区域 -->
    <swiper class="swiper" :current="activeIndex" :autoplay="true" @change="handleSwiperChange">
        <swiper-item v-for="(item, index) in personList" :key="index">
            <view class="card">
                <image :src="item.avatar" class="avatar" mode="aspectFit" />
                <view class="info">
                    <view class="item">姓名：{{ item.name }}</view>
                    <view class="item">性别：{{ item.gender }}</view>
                    <view class="item">民族：{{ item.nation }}</view>
                    <view class="item">出生：{{ item.birth }}</view>
                    <view class="item">住址：{{ item.address }}</view>
                    <view class="item">身份证号：{{ item.idNo }}</view>
                </view>
                <image :src="item.signature" class="signature" mode="aspectFit" />
            </view>
        </swiper-item>
    </swiper>
</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 轮播数据列表
const personList = [
    {
        name: '韦小宝',
        gender: '男',
        nation: '汉',
        birth: '1654年12月20日',
        address: '北京市东城区景山前街4号紫禁城敬事房',
        idNo: '110101165412200001',
        avatar: '/static/weixiaobao.png', // 替换为实际头像路径
        signature: '/static/signature1.png', // 替换为实际签名路径
    },
    {
        name: '多隆',
        gender: '男',
        nation: '满',
        birth: '1652年05月10日',
        address: '北京市西城区西单大街5号',
        idNo: '110102165205100002',
        avatar: '/static/duolong.png',
        signature: '/static/signature2.png',
    },
    {
        name: '小双',
        gender: '女',
        nation: '汉',
        birth: '1656年08月15日',
        address: '北京市朝阳区建国路8号',
        idNo: '110105165608150003',
        avatar: '/static/xiaoshuang.png',
        signature: '/static/signature3.png',
    },
];

// 激活的索引
const activeIndex = ref(0);

// 轮播切换时同步索引
const handleSwiperChange = (e: { detail: { current: number } }) => {
  activeIndex.value = e.detail.current;
};
</script>

<style scoped>
.carousel-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15rpx; /* 姓名栏与轮播的间距 */
    padding: 20rpx;
    box-sizing: border-box;
}

/* 姓名导航栏样式（顶部） */
.name-nav {
    display: flex;
    justify-content: center; /* 姓名居中分布 */
    gap: 30rpx; /* 姓名之间的间距 */
    padding: 10rpx 0;
    background-color: #f5f5f5;
    border-radius: 12rpx;
    width: 100%;
    overflow-x: auto; /* 姓名过多时可横向滚动 */
    white-space: nowrap; /* 防止姓名换行 */
}

.name-nav view {
    font-size: 28rpx;
    padding: 5rpx 15rpx; /* 增加点击区域 */
    color: #666;
    position: relative;
    transition: color 0.3s;
}

/* 选中姓名的高亮样式 */
.name-nav view.active {
    color: #007AFF; /* 主题色高亮 */
    font-weight: bold;
}

/* 可选：添加底部指示线增强选中效果 */
.name-nav view.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20rpx;
    height: 4rpx;
    background-color: #007AFF;
    border-radius: 2rpx;
}

/* 轮播区域样式 */
.swiper {
    width: 100%;
    height: 500rpx; /* 轮播高度可根据内容调整 */
    border-radius: 12rpx;
    overflow: hidden;
}

.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx;
    background-color: #fff;
    height: 100%;
    box-sizing: border-box;
}

.avatar {
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    margin-bottom: 20rpx;
    border: 2rpx solid #eee;
}

.info {
    width: 100%;
    margin-bottom: 20rpx;
}

.item {
    font-size: 26rpx;
    line-height: 40rpx;
    color: #333;
    padding-left: 10rpx;
}

.signature {
    width: 100%;
    height: 120rpx;
    margin-top: auto; /* 签名区域靠下 */
}
</style>

效果图2：

代码：

复制代码

<template>
  <view class="carousel-container">
    <!-- 轮播内容区域 -->
    <swiper
      class="swiper"
      :current="activeIndex"
      :autoplay="true"
      @change="handleSwiperChange"
    >
      <swiper-item v-for="(item, index) in personList" :key="index">
        <view class="card">
          <image :src="item.avatar" class="avatar" mode="aspectFit" />
          <view class="info">
            <view class="item">姓名：{{ item.name }}</view>
            <view class="item">性别：{{ item.gender }}</view>
            <view class="item">民族：{{ item.nation }}</view>
            <view class="item">出生：{{ item.birth }}</view>
            <view class="item">住址：{{ item.address }}</view>
            <view class="item">身份证号：{{ item.idNo }}</view>
          </view>
         
        </view>
      </swiper-item>
    </swiper>

    <!-- 姓名导航栏（默认展示所有姓名，选中高亮） -->
    <view class="name-nav">
      <view
        v-for="(item, index) in personList"
        :key="index"
        :class="{ active: activeIndex === index }"
        @click="activeIndex = index"
      >
        {{ item.name }}
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 轮播数据列表
const personList = [
  {
    name: '韦小宝',
    gender: '男',
    nation: '汉',
    birth: '1654年12月20日',
    address: '北京市东城区景山前街4号紫禁城敬事房',
    idNo: '110101165412200001',

  },
  {
    name: '多隆',
    gender: '男',
    nation: '满',
    birth: '1652年05月10日',
    address: '北京市西城区西单大街5号',
    idNo: '110102165205100002',
  
  },
  {
    name: '小双',
    gender: '女',
    nation: '汉',
    birth: '1656年08月15日',
    address: '北京市朝阳区建国路8号',
    idNo: '110105165608150003',
  
  },
];

// 激活的索引
const activeIndex = ref(0);

// 轮播切换时同步索引
const handleSwiperChange = (e: { detail: { current: number } }) => {
  activeIndex.value = e.detail.current;
};
</script>

<style scoped>
.carousel-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  padding: 20rpx;
}

.swiper {
  width: 100%;
  height: 500rpx;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.avatar {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  margin-bottom: 10rpx;
}

.info {
  width: 100%;
  margin-bottom: 20rpx;
}

.item {
  font-size: 28rpx;
  line-height: 40rpx;
  margin-bottom: 8rpx;
}

.signature {
  width: 100%;
  height: 150rpx;
}

.name-nav {
  display: flex;
  justify-content: space-around;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #f5f5f5;
  border-radius: 12rpx;
}

.name-nav view {
  font-size: 28rpx;
  cursor: pointer;
}

.name-nav view.active {
  color: #007AFF;
  font-weight: bold;
  border-bottom: 4rpx solid #007AFF;
}
</style>