# CustomerBanner

**Repository Path**: hyhe/customer-banner

## Basic Information

- **Project Name**: CustomerBanner
- **Description**: 使用鸿蒙ArkTS实现广告轮播图
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-02-27
- **Last Updated**: 2025-05-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 滚动轮播图

### 一、项目简介
#### 1. demo地址： https://gitee.com/hyhe/customer-banner.git
#### 2. 项目效果图

#### 3. 使用示例


```
// 1. 导入头文件
import { CustomerSwiper } from './CustomerBanner/CustomerSwiper'
import { CustomerSwiperConfiguration } from './CustomerBanner/CustomerSwiperConfiguration'

@Entry
@Component
struct Index {
  // 初始化横向滚动配置项
  horizontalConfig: CustomerSwiperConfiguration = new CustomerSwiperConfiguration()
  // 初始化纵向滚动配置项
  verticalConfig: CustomerSwiperConfiguration = new CustomerSwiperConfiguration()
  
  // 更具UI设置配置项参数
  aboutToAppear() {
    this.verticalConfig.itemWidth = 300
    this.verticalConfig.itemHeight = 200
    this.verticalConfig.isHorizontal = false

    this.horizontalConfig.itemWidth = 300
    this.horizontalConfig.itemHeight = 200

  }

  build() {
    Column() {
      // 调用
      CustomerSwiper({ swiperConfig: this.verticalConfig })
        .margin({top: 100})
        .width("100%").height(300)
        .clip(true)
      CustomerSwiper({ swiperConfig: this.horizontalConfig }).width("100%").height(300).clip(true)
    }
  }
}
```
### 二、项目功能介绍

#### 1. 配置项类 CustomerSwiperConfiguration

```
export class CustomerSwiperConfiguration {
  /**
   *  isHorizontal 是否横向滚动
   *  默认： true 横向滚动
   */
  isHorizontal: boolean = true

  /**
   * 单个元素的宽度
   * */
  itemWidth: number = 300;

  /**
   * 单个元素的高度
   * */
  itemHeight: number = 100

  /**
   * 显示元素的个数
   * */
  showCount: number = 5;

  /**
   * 元素之间的间隔距离
   * */
  itemSpace: number = 10

  /**
   * 透明度系数
   * */
  opacityCoefficients: number = 0.1;

  /**
   * 偏移量系数
   * */
  offsetCoefficients: number = 20;

  /**
   * 换下一页的拖动距离
   * */
  maxMoveOffset: number = 60;

  /**
   * 元素倒角
   * */
  radius: number = 10

  /**
   * 拖动动作延时
   * */
  duration: number = 300

  /**
   * 自动滚动延时
   * */
  animationDuration = 3000
}
```

#### 2. 滚动轮播类 CustomerSwiper

1. 主要计算方法
```
// 计算初始化元素距离页面展示元素的偏移量
getImgCoefficients(index?: number): number {
    if (index === undefined) {
      return 0;
    }
    let coefficient = this.aheadIndex - index;
    let tempCoefficient = Math.abs(coefficient);
    if (tempCoefficient <= this.halfCount) {
      return coefficient;
    }
    let dataLength = this.imageList.length;
    let tempOffset = dataLength - tempCoefficient;
    if (tempOffset <= this.halfCount) {
      if (coefficient > 0) {
        return -tempOffset;
      }
      return tempOffset;
    }
    return 0;
  }

  // 计算纵向滚动时元素的纵向偏移量 
  getOffSetY(index?: number): number {
    if (index === undefined) {
      return 0;
    }
    let offsetIndex = this.getImgCoefficients(index);
    let tempOffset = Math.abs(offsetIndex);
    let offsetY = this.marginBottom / (tempOffset + 1);
    if (tempOffset === 1) {
      offsetY += -offsetIndex * this.swiperConfig.itemHeight - this.swiperConfig.itemSpace;
    } else {
      offsetY += -offsetIndex * this.swiperConfig.itemHeight - this.swiperConfig.itemSpace;
    }
    return offsetY;
  }
  // 计算横向滚动时元素的纵向偏移量 
  getOffsetX(index?: number): number {
    if (index === undefined) {
      return 0
    }
    let offsetIndex = this.getImgCoefficients(index)
    let tempOffset = Math.abs(offsetIndex)
    let offsetX = this.marginRight / (tempOffset + 1)
    if (tempOffset === 1) {
      offsetX += -(offsetIndex * this.swiperConfig.itemWidth + this.swiperConfig.itemSpace)
    } else {
      offsetX += -offsetX * this.swiperConfig.itemWidth - this.swiperConfig.itemSpace
    }
    return offsetX
  }
  // 计算每一个元素的宽度
  getItemWidth(index?: number): number {
    return index !== this.aheadIndex && this.getImgCoefficients(index) === 0
      ? this.swiperConfig.itemWidth
      : this.swiperConfig.itemWidth - this.swiperConfig.offsetCoefficients * Math.abs(this.getImgCoefficients(index))
  }
```
2. 拖拽手势代码
```
 // 添加滑动手势
 PanGesture({ direction: this.swiperConfig.isHorizontal ? PanDirection.Horizontal : PanDirection.Vertical })
        .onActionStart((event: GestureEvent | undefined) => {
          if (!event) {
            return;
          }
          this.clearTiming()
          this.changedIndex = false;
          this.handlePanGesture(this.swiperConfig.isHorizontal ? event.offsetX : event.offsetY);
        })
        .onActionUpdate((event: GestureEvent | undefined) => {
          if (!event) {
            return;
          }
          this.handlePanGesture(this.swiperConfig.isHorizontal ? event.offsetX : event.offsetY);
        })
        .onActionEnd(() => {
          animateTo({
            duration: this.swiperConfig.duration,
          }, () => {
            this.swiperConfig.isHorizontal ? this.marginRight = 0 : this.marginBottom = 0;
            this.second = this.aheadIndex
            this.startTiming()
          });
        })
```

3. 拖拽动作处理
```
// 根据滑动偏移量offset处理是否要切换下一页
handlePanGesture(offset: number): void {
    if (Math.abs(offset) < this.swiperConfig.maxMoveOffset) {
      this.marginBottom = offset;
    } else {
      if (this.changedIndex) {
        return;
      }
      this.changedIndex = true;
      this.startAnimation(offset < 0);
    }
  }

  // 进行切换
  startAnimation(isUp: boolean): void {
    animateTo({
      duration: this.swiperConfig.duration,
    }, () => {
      let dataLength = this.imageList.length;
      let tempIndex = isUp ? this.aheadIndex + 1 : dataLength + this.aheadIndex - 1;
      this.aheadIndex = tempIndex % dataLength;
      this.marginBottom = 0;
    });
  }
```

4. 时间计时器处理

```
// 开始启动时间计时器并切换页面
startTiming() {
    this.timer = setInterval(() => {
      this.second++;
      if (this.second === this.imageList.length) {
        this.second = 0
      }
      this.startAnimation(true)
    }, this.swiperConfig.animationDuration);
  }

  // 销毁计时器
  clearTiming() {
    if (this.timer !== -1) {
      clearInterval(this.timer);
      this.timer = -1;
    }
  }
```