滚动轮播图
一、项目简介
1. demo地址： https://gitee.com/hyhe/customer-banner.git
2. 项目效果图
CustomerBanner.gif
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: number = 3000
}
2. 滚动轮播类 CustomerSwiper
- 主要计算方法
// 计算初始化元素距离页面展示元素的偏移量
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))
}
- 拖拽手势代码
// 添加滑动手势
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()
});
})
- 拖拽动作处理
// 根据滑动偏移量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;
});
}
- 时间计时器处理
// 开始启动时间计时器并切换页面
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;
}
}
