更新记录

2.0.0（2025-10-09） 下载此版本

✨ 新功能

• 新增多种显示模式：dots(点状)、numbers(数字)、progress(进度条)、thumbnails(缩略图)
• 新增多种形状：circle(圆形)、square(方形)、diamond(菱形)、bar(条形)、custom(自定义)
• 新增丰富动画效果：scale(缩放)、rotate(旋转)、bounce(弹性)、pulse(脉冲)、fade(淡入淡出)、none(无动画)
• 新增位置布局选项：top(顶部)、bottom(底部)、left(左侧)、right(右侧)、inside(内嵌)
• 新增交互功能：点击跳转、悬停效果
• 新增事件支持：change、click、hover
• 新增插槽支持：indicator、thumbnail

1.0.0（2025-09-11） 下载此版本

1.0.0

平台兼容性

uni-app(4.07)

uni-app x(4.07)

其他

yo-indicator-dot

🚀 功能强大的轮播指示器组件，支持多种显示模式、形状和动画效果

✨ 功能特点

• 🎯 零配置开箱即用 - 不传任何参数就能正常工作
• 🎨 多种显示模式 - 点状、数字、进度条、缩略图
• 🔷 多种形状 - 圆形、方形、菱形、条形、自定义
• ⚡️ 丰富动画 - 缩放、旋转、弹性、脉冲、淡入淡出
• 📍 灵活位置 - 顶部、底部、左侧、右侧、内嵌
• 🖱️ 交互功能 - 点击跳转、悬停效果
• 📱 全平台支持 - H5、小程序、App
• 🔄 向后兼容 - 现有代码升级无压力

🚀 快速开始

1. 安装

通过 HBuilderX 插件市场安装：

1. 打开 HBuilderX
2. 点击菜单栏 工具 → 插件安装
3. 搜索 yo-indicator-dot 并安装
4. 或直接下载 uni_modules 文件夹到项目中

2. 基础使用

<template>
  <view>
    <swiper @change="onSwiperChange" indicator-dots="false">
      <swiper-item v-for="(item, index) in bannerList" :key="index">
        <view>{{ item.title }}</view>
      </swiper-item>
    </swiper>

    <!-- 最简单的使用方式 -->
    <yo-indicator-dot 
      :current-index="currentIndex" 
      :length="bannerList.length"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue'

const currentIndex = ref(0)
const bannerList = ref([
  { title: '轮播图 1' },
  { title: '轮播图 2' },
  { title: '轮播图 3' }
])

const onSwiperChange = (e) => {
  currentIndex.value = e.detail.current
}
</script>

🎨 显示模式

点状模式（默认）

<yo-indicator-dot 
  :current-index="currentIndex" 
  :length="length"
  mode="dots"
  shape="circle"
  animation="scale"
/>

数字模式

<yo-indicator-dot 
  :current-index="currentIndex" 
  :length="length"
  mode="numbers"
  active-color="#00cc66"
/>

进度条模式

<yo-indicator-dot 
  :current-index="currentIndex" 
  :length="length"
  mode="progress"
  default-color="#e5e5e5"
  active-color="#ff6b6b"
  progress-height="8rpx"
/>

缩略图模式

<yo-indicator-dot 
  :current-index="currentIndex" 
  :length="length"
  mode="thumbnails"
  thumbnail-size="60rpx"
>
  <template #thumbnail="{ index, isActive }">
    <image :src="thumbnails[index]" />
  </template>
</yo-indicator-dot>

🔷 形状样式

<!-- 圆形（默认） -->
<yo-indicator-dot shape="circle" />

<!-- 方形 -->
<yo-indicator-dot shape="square" />

<!-- 菱形 -->
<yo-indicator-dot shape="diamond" />

<!-- 条形 -->
<yo-indicator-dot shape="bar" />

<!-- 自定义 -->
<yo-indicator-dot shape="custom" custom-content>
  <template #indicator="{ index, isActive }">
    <text>{{ index + 1 }}</text>
  </template>
</yo-indicator-dot>

⚡️ 动画效果

<!-- 缩放动画（默认） -->
<yo-indicator-dot animation="scale" />

<!-- 旋转动画 -->
<yo-indicator-dot animation="rotate" />

<!-- 弹性动画 -->
<yo-indicator-dot animation="bounce" />

<!-- 脉冲动画 -->
<yo-indicator-dot animation="pulse" />

<!-- 淡入淡出 -->
<yo-indicator-dot animation="fade" />

<!-- 无动画 -->
<yo-indicator-dot animation="none" />

📍 位置布局

<!-- 底部（默认） -->
<yo-indicator-dot position="bottom" />

<!-- 顶部 -->
<yo-indicator-dot position="top" />

<!-- 左侧 -->
<yo-indicator-dot position="left" />

<!-- 右侧 -->
<yo-indicator-dot position="right" />

<!-- 内嵌 -->
<yo-indicator-dot position="inside" />

🖱️ 交互功能

<yo-indicator-dot 
  :current-index="currentIndex" 
  :length="length"
  :clickable="true"
  :hoverable="true"
  @click="onIndicatorClick"
  @change="onIndicatorChange"
  @hover="onIndicatorHover"
/>

📋 完整参数

基础参数（向后兼容）

💡 智能形状提示: 当 active-width 或 default-width 是 dot-height 的2倍以上时，组件会自动使用条形样式，确保视觉效果更佳。

新增功能参数

🎯 事件

🔧 插槽

💡 使用技巧

1. 渐进式增强

<!-- 基础使用 -->
<yo-indicator-dot :current-index="index" :length="length" />

<!-- 需要更多功能时再添加参数 -->
<yo-indicator-dot 
  :current-index="index" 
  :length="length"
  mode="numbers"
  animation="bounce"
/>

2. 主题定制

<yo-indicator-dot 
  :current-index="index" 
  :length="length"
  default-color="rgba(255,255,255,0.3)"
  active-color="rgba(255,255,255,0.9)"
  position="inside"
/>

3. 响应式设计

<yo-indicator-dot 
  :current-index="index" 
  :length="length"
  :gap="isMobile ? '8rpx' : '12rpx'"
  :dot-height="isMobile ? '8rpx' : '12rpx'"
/>

📱 平台支持

• ✅ H5（Safari、Chrome、Firefox）
• ✅ App（Android、iOS、HarmonyOS）
• ✅ 微信小程序、支付宝小程序、百度小程序
• ✅ 字节跳动小程序、QQ小程序、***小程序
• ✅ 钉钉小程序、京东小程序

🔄 更新日志

v2.0.0

• ✨ 新增多种显示模式（数字、进度条、缩略图）
• ✨ 新增多种形状（方形、菱形、条形、自定义）
• ✨ 新增丰富动画效果
• ✨ 新增位置布局选项
• ✨ 新增交互功能（点击、悬停）
• 🔧 保持向后兼容，现有代码无需修改
• 📚 完善文档和演示

v1.0.0

• 🎉 初始版本发布
• 基础点状指示器功能
• 支持自定义颜色和尺寸

License

MIT