# swiperpro

**Repository Path**: github-9819409/swiperpro

## Basic Information

- **Project Name**: swiperpro
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-02
- **Last Updated**: 2025-10-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 自定义轮播组件使用教程

## 组件介绍

`customSwiper` 是一个功能丰富的轮播组件，具有以下特点：

- 中间大两边小的视觉效果
- 左右控制按钮导航
- 拖拽切换功能
- 自动轮播
- 点击轮播项和指示点切换

## 使用方法

### 1. 引入组件

```vue
<script>
import customSwiper from '@/components/customSwiper.vue'

export default {
  components: {
    customSwiper
  }
}
</script>
```

### 2. 使用组件

```vue
<template>
  <view class="content">
    <customSwiper 
      :list="swiperList" 
      :interval="3000" 
      :autoplay="true" 
      :height="500"
      @change="onSwiperChange"
      @click="onSwiperClick"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      swiperList: [
        { image: '/static/image1.jpg' },
        { image: '/static/image2.jpg' },
        { image: '/static/image3.jpg' },
        { image: '/static/image4.jpg' },
        { image: '/static/image5.jpg' }
      ]
    }
  },
  methods: {
    onSwiperChange(index) {
      console.log('当前轮播项索引:', index)
    },
    onSwiperClick(index) {
      console.log('点击了轮播项:', index)
      uni.showToast({
        title: `点击了第${index + 1}项`,
        icon: 'none'
      })
    }
  }
}
</script>
```

## 组件属性

| 属性名 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| list | Array | [] | 轮播数据列表，每项必须包含image属性 |
| interval | Number | 3000 | 自动轮播间隔时间（毫秒） |
| autoplay | Boolean | true | 是否自动轮播 |
| height | Number | 500 | 轮播容器高度（rpx） |

## 组件事件

| 事件名 | 说明 | 返回值 |
| --- | --- | --- |
| change | 轮播切换事件 | 当前轮播项的索引 |
| click | 轮播项点击事件 | 点击的轮播项索引 |

## 组件方法

组件暴露了以下方法，可以通过ref调用：

```vue
<template>
  <customSwiper ref="swiper" :list="swiperList" />
  <button @click="nextSlide">下一张</button>
  <button @click="prevSlide">上一张</button>
  <button @click="goToSlide(2)">跳转到第3张</button>
</template>

<script>
export default {
  methods: {
    nextSlide() {
      this.$refs.swiper.next()
    },
    prevSlide() {
      this.$refs.swiper.prev()
    },
    goToSlide(index) {
      this.$refs.swiper.switchTo(index)
    }
  }
}
</script>
```

| 方法名 | 说明 | 参数 |
| --- | --- | --- |
| next() | 切换到下一项 | 无 |
| prev() | 切换到上一项 | 无 |
| switchTo(index) | 切换到指定索引项 | index: 目标索引 |

## 自定义样式

组件内部使用了以下主要样式类，可以通过覆盖这些类来自定义外观：

- `.custom-swiper`: 整个轮播组件容器
- `.swiper-container`: 轮播项容器
- `.swiper-item`: 轮播项
- `.swiper-img`: 轮播图片容器
- `.swiper-dots`: 指示点容器
- `.dot`: 指示点
- `.control-btn`: 控制按钮
- `.prev-btn`: 上一项按钮
- `.next-btn`: 下一项按钮

## 注意事项

1. 轮播组件默认宽度为750rpx（全屏宽度）
2. 轮播项图片默认为圆形，可以通过修改样式自定义形状
3. 中间项尺寸为400rpx，两侧项尺寸为300rpx
4. 组件使用了绝对定位实现层叠效果，请确保父容器有足够的高度

## 示例效果

轮播组件效果如下：
- 中间项大，两侧项小
- 带有左右控制按钮
- 底部有指示点
- 支持拖拽切换
- 支持自动轮播


![示例演示图片](./example.gif "示例演示图片")