uni-app swiperDot 轮播图指示点新增3D模式

在 uni-app 中，swiper 组件的 dot 指示点默认是二维平面的样式。如果你想实现一个3D模式的指示点效果，可以通过自定义指示点样式和使用 CSS3 的3D变换属性来实现。以下是一个示例代码，展示如何在 uni-app 中实现3D模式的轮播图指示点。

1. 修改 swiper 组件

首先，在 swiper 组件中，设置 indicator-dots 为 true，但禁用默认的指示点样式，通过设置 indicator-color 和 indicator-active-color 为透明。

<template>
  <view class="swiper-container">
    <swiper
      :autoplay="true"
      indicator-dots="true"
      indicator-color="transparent"
      indicator-active-color="transparent"
      class="swiper"
      @change="handleSwiperChange"
    >
      <swiper-item v-for="(item, index) in items" :key="index">
        <image :src="item.image" class="swiper-image"></image>
      </swiper-item>
    </swiper>
    <view class="dots-container">
      <view
        v-for="(item, index) in items"
        :key="index"
        :class="['dot', { active: currentIndex === index }]"
        class="dot-item"
      ></view>
    </view>
  </view>
</template>

2. 自定义3D指示点样式

在 <style> 中定义自定义的3D指示点样式。

<style scoped>
.swiper-container {
  position: relative;
}

.swiper {
  height: 200px; /* 根据需要调整高度 */
}

.swiper-image {
  width: 100%;
  height: 100%;
}

.dots-container {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.dot-item {
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.dot.active {
  background-color: rgba(255, 255, 255, 0.9);
  transform: scale(1.5) translateY(-10px);
}

/* 3D效果 */
.dot-item::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: inherit;
  transform: translate(-50%, -50%) rotateX(45deg) scale(0.8);
  opacity: 0.6;
  pointer-events: none;
}

.dot.active::before {
  opacity: 1;
}
</style>

3. 处理轮播图切换事件

在 <script> 中处理轮播图切换事件，更新当前指示点的索引。

<script>
export default {
  data() {
    return {
      items: [
        { image: '/static/image1.jpg' },
        { image: '/static/image2.jpg' },
        { image: '/static/image3.jpg' },
      ],
      currentIndex: 0,
    };
  },
  methods: {
    handleSwiperChange(event) {
      this.currentIndex = event.detail.current;
    },
  },
};
</script>

上述代码展示了如何通过自定义指示点样式和 CSS3 的3D变换属性，在 uni-app 中实现3D模式的轮播图指示点效果。你可以根据需要进一步调整样式和动画效果。