更新记录

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

1.0.0

平台兼容性

uni-app(4.07)

其他

yo-indicator-dot

一个美观的uniapp轮播指示器组件，支持自定义颜色和平滑过渡动画。

特性

• ✨ 支持Vue2和Vue3
• 🎨 自定义指示点颜色
• 📏 可调整指示点尺寸和间距
• ⚡️ 平滑的过渡动画
• 📱 支持所有uniapp平台
• 🚀 轻量级，无依赖

安装

方式一：插件市场安装

1. 访问 DCloud插件市场
2. 搜索 yo-indicator-dot
3. 点击安装到项目

方式二：手动安装

1. 下载插件包
2. 解压到项目的 uni_modules 目录下

使用方法

基础用法

<template>
  <view>
    <!-- 轮播组件 -->
    <swiper @change="onSwiperChange">
      <swiper-item v-for="(item, index) in bannerList" :key="index">
        <image :src="item.image"></image>
      </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([
  { image: '/static/banner1.jpg' },
  { image: '/static/banner2.jpg' },
  { image: '/static/banner3.jpg' }
])

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

自定义样式

<template>
  <yo-indicator-dot
    :current-index="currentIndex" 
    :length="bannerList.length"
    default-color="#e5e5e5"
    active-color="#ff6b35"
    default-width="10rpx"
    active-width="24rpx"
    dot-height="10rpx"
    gap="16rpx"
    duration="0.5s"
  />
</template>

API

Props

平台兼容性

更新日志

查看 CHANGELOG.md

License

MIT