feat: 首页顶部的搭建
This commit is contained in:
299
src/uni_modules/yo-indicator-dot/readme.md
Normal file
299
src/uni_modules/yo-indicator-dot/readme.md
Normal file
@@ -0,0 +1,299 @@
|
||||
# yo-indicator-dot
|
||||
|
||||
🚀 功能强大的轮播指示器组件，支持多种显示模式、形状和动画效果
|
||||
|
||||
## ✨ 功能特点
|
||||
|
||||
- 🎯 **零配置开箱即用** - 不传任何参数就能正常工作
|
||||
- 🎨 **多种显示模式** - 点状、数字、进度条、缩略图
|
||||
- 🔷 **多种形状** - 圆形、方形、菱形、条形、自定义
|
||||
- ⚡️ **丰富动画** - 缩放、旋转、弹性、脉冲、淡入淡出
|
||||
- 📍 **灵活位置** - 顶部、底部、左侧、右侧、内嵌
|
||||
- 🖱️ **交互功能** - 点击跳转、悬停效果
|
||||
- 📱 **全平台支持** - H5、小程序、App
|
||||
- 🔄 **向后兼容** - 现有代码升级无压力
|
||||
|
||||
## 🚀 快速开始
|
||||
|
||||
### 1. 安装
|
||||
|
||||
通过 HBuilderX 插件市场安装：
|
||||
|
||||
1. 打开 HBuilderX
|
||||
2. 点击菜单栏 `工具` → `插件安装`
|
||||
3. 搜索 `yo-indicator-dot` 并安装
|
||||
4. 或直接下载 uni_modules 文件夹到项目中
|
||||
|
||||
### 2. 基础使用
|
||||
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
## 🎨 显示模式
|
||||
|
||||
### 点状模式（默认）
|
||||
```vue
|
||||
<yo-indicator-dot
|
||||
:current-index="currentIndex"
|
||||
:length="length"
|
||||
mode="dots"
|
||||
shape="circle"
|
||||
animation="scale"
|
||||
/>
|
||||
```
|
||||
|
||||
### 数字模式
|
||||
```vue
|
||||
<yo-indicator-dot
|
||||
:current-index="currentIndex"
|
||||
:length="length"
|
||||
mode="numbers"
|
||||
active-color="#00cc66"
|
||||
/>
|
||||
```
|
||||
|
||||
### 进度条模式
|
||||
```vue
|
||||
<yo-indicator-dot
|
||||
:current-index="currentIndex"
|
||||
:length="length"
|
||||
mode="progress"
|
||||
default-color="#e5e5e5"
|
||||
active-color="#ff6b6b"
|
||||
progress-height="8rpx"
|
||||
/>
|
||||
```
|
||||
|
||||
### 缩略图模式
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
## 🔷 形状样式
|
||||
|
||||
```vue
|
||||
<!-- 圆形（默认） -->
|
||||
<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>
|
||||
```
|
||||
|
||||
## ⚡️ 动画效果
|
||||
|
||||
```vue
|
||||
<!-- 缩放动画（默认） -->
|
||||
<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" />
|
||||
```
|
||||
|
||||
## 📍 位置布局
|
||||
|
||||
```vue
|
||||
<!-- 底部（默认） -->
|
||||
<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" />
|
||||
```
|
||||
|
||||
## 🖱️ 交互功能
|
||||
|
||||
```vue
|
||||
<yo-indicator-dot
|
||||
:current-index="currentIndex"
|
||||
:length="length"
|
||||
:clickable="true"
|
||||
:hoverable="true"
|
||||
@click="onIndicatorClick"
|
||||
@change="onIndicatorChange"
|
||||
@hover="onIndicatorHover"
|
||||
/>
|
||||
```
|
||||
|
||||
## 📋 完整参数
|
||||
|
||||
### 基础参数（向后兼容）
|
||||
|
||||
| 参数 | 类型 | 默认值 | 说明 |
|
||||
|------|------|--------|------|
|
||||
| current-index | Number | 0 | 当前轮播的下标 |
|
||||
| length | Number | 0 | 轮播数据的长度 |
|
||||
| default-color | String | #cccccc | 默认指示点的颜色 |
|
||||
| active-color | String | #007aff | 选中指示点的颜色 |
|
||||
| default-width | String | 12rpx | 默认指示点宽度 |
|
||||
| active-width | String | 20rpx | 选中指示点宽度 |
|
||||
| dot-height | String | 12rpx | 指示点高度 |
|
||||
| gap | String | 12rpx | 指示点间距 |
|
||||
| duration | String | 0.3s | 动画持续时间 |
|
||||
|
||||
> **💡 智能形状提示**: 当 `active-width` 或 `default-width` 是 `dot-height` 的2倍以上时，组件会自动使用条形样式，确保视觉效果更佳。
|
||||
|
||||
### 新增功能参数
|
||||
|
||||
| 参数 | 类型 | 默认值 | 说明 |
|
||||
|------|------|--------|------|
|
||||
| mode | String | dots | 显示模式：dots/numbers/progress/thumbnails |
|
||||
| shape | String | circle | 指示器形状：circle/square/diamond/bar/custom |
|
||||
| animation | String | scale | 动画效果：scale/rotate/bounce/pulse/fade/none |
|
||||
| position | String | bottom | 位置：top/bottom/left/right/inside |
|
||||
| clickable | Boolean | true | 是否可点击 |
|
||||
| hoverable | Boolean | true | 是否显示悬停效果 |
|
||||
| custom-content | Boolean | false | 自定义内容（用于custom形状） |
|
||||
| progress-height | String | 6rpx | 进度条高度（progress模式） |
|
||||
| thumbnail-size | String | 60rpx | 缩略图尺寸（thumbnails模式） |
|
||||
|
||||
## 🎯 事件
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|--------|------|------|
|
||||
| change | 指示器切换时触发 | index: 新的下标 |
|
||||
| click | 点击指示器时触发 | index: 点击的下标 |
|
||||
| hover | 悬停指示器时触发 | { index, isHover } |
|
||||
|
||||
## 🔧 插槽
|
||||
|
||||
| 插槽名 | 说明 | 参数 |
|
||||
|--------|------|------|
|
||||
| indicator | 自定义指示器内容 | { index, isActive } |
|
||||
| thumbnail | 自定义缩略图内容 | { index, isActive } |
|
||||
|
||||
## 💡 使用技巧
|
||||
|
||||
### 1. 渐进式增强
|
||||
```vue
|
||||
<!-- 基础使用 -->
|
||||
<yo-indicator-dot :current-index="index" :length="length" />
|
||||
|
||||
<!-- 需要更多功能时再添加参数 -->
|
||||
<yo-indicator-dot
|
||||
:current-index="index"
|
||||
:length="length"
|
||||
mode="numbers"
|
||||
animation="bounce"
|
||||
/>
|
||||
```
|
||||
|
||||
### 2. 主题定制
|
||||
```vue
|
||||
<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. 响应式设计
|
||||
```vue
|
||||
<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
|
||||
Reference in New Issue
Block a user