完整代碼 : https://github.com/dazeGitHub/TestHarmonyBanner
定義組件 SwiperComponentHalfFold :
import { SwiperData } from '../model/SwiperData';
import Logger from '../utils/Logger';
/**
* 層疊輪播圖組件
* 是 SwiperComponent 的修改版, 只顯示右側的折疊部分
*/
@Component
export struct SwiperComponentHalfFold {
@State currentIndex: number = 0;
@State swiperData: SwiperData[] = [
new SwiperData($r("app.media.mp_chart"), 'MpChart圖表實現(xiàn)案例'),
new SwiperData($r("app.media.lottie"), 'Lottie動畫'),
new SwiperData($r("app.media.component_tack"), '組件堆疊'),
new SwiperData($r("app.media.ic_swiper1"), '輪播1'),
new SwiperData($r("app.media.ic_swiper2"), '輪播2'),
new SwiperData($r("app.media.ic_swiper3"), '輪播3'),
];
private halfCount: number = Math.floor(6 / 2); //半數(shù) = 總數(shù) / 2
private manualSlidingDuration: number = 800; //手動滑動時長
private automaticSlidingDuration: number = 300;
private automaticSwitchTime: number = 5000;
private offsetXValue = 15;
@State swiperInterval: number = 0
aboutToAppear(): void {
this.currentIndex = this.halfCount;
this.swiperInterval = setInterval(() => {
this.startAnimation(true, this.manualSlidingDuration);
}, this.automaticSwitchTime);
}
/**
* 獲取圖片系數(shù)
* @param index：索引值
* @returns
*/
getImgCoefficients(index: number): number {
const coefficient: number = this.currentIndex - index; // 計算圖片左右位置
const tempCoefficient: number = Math.abs(coefficient);
if (tempCoefficient <= this.halfCount) {
return coefficient;
}
const dataLength: number = this.swiperData.length;
let tempOffset: number = dataLength - tempCoefficient; // 判斷圖片位于左右層級位置
if (tempOffset <= this.halfCount) { //如果在左側
if (coefficient > 0) {
return -tempOffset;
}
return tempOffset;
}
return 0;
}
/**
* 計算偏移量
* @param index：索引值
* @returns
*/
getOffSetX(index: number): number {
const offsetIndex: number = this.getImgCoefficients(index);
const tempOffset: number = Math.abs(offsetIndex);
let offsetX: number = 0;
if (tempOffset === 1) {
// 根據(jù)圖片層級系數(shù)來決定左右偏移量
offsetX = -15 * offsetIndex;
}
if (tempOffset === 2) {
// 根據(jù)圖片層級系數(shù)來決定左右偏移量
offsetX = -this.offsetXValue * offsetIndex;
}
Logger.info("TAG", "index = " + index + " offsetX = " + offsetX)
return offsetX;
}
// 性能：顯式動畫(https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V2/ts-explicit-animation-0000001478341181-V2)
startAnimation(isLeft: boolean, duration: number): void {
animateTo({
duration: duration,
}, () => {
const dataLength: number = this.swiperData.length;
const tempIndex: number = isLeft ? this.currentIndex + 1 : this.currentIndex - 1 + dataLength;
this.currentIndex = tempIndex % dataLength;
})
}
build() {
Column() {
Stack() {
// LazyForEach必須在容器組件內使用，僅有List、Grid、Swiper以及WaterFlow組件支持數(shù)據(jù)懶加載，其他組件仍然是一次性加載所有的數(shù)據(jù)。
ForEach(this.swiperData, (item: SwiperData, index: number) => {
Stack({ alignContent: Alignment.BottomStart }) {
Image(item.imageSrc)
.objectFit(ImageFit.Cover)
.width('100%')
.height('100%')
.borderRadius($r('app.string.main_page_top_borderRadius'))
// 輪播圖底部蒙層 必定在上方
Stack() {
Column() {
}
.width('100%')
.height('100%')
.backgroundColor(Color.Black)
.opacity(0.3)
.borderRadius({
topLeft: 0,
topRight: 0,
bottomLeft: $r('app.string.main_page_top_borderRadius'),
bottomRight: $r('app.string.main_page_top_borderRadius')
})
Text(item.name)
.width('100%')
.height('100%')
.fontSize(16)
.fontColor(Color.White)
.textAlign(TextAlign.Start)
.padding($r('app.string.main_page_padding5'))
}
.height($r('app.string.bottom_title_height'))
}
.backgroundColor(Color.White)
.borderRadius(8)
.offset({
x: this.getOffSetX(index),
y: 0
})
.blur(index !== this.currentIndex ? 12 : 0)
// TODO: 知識點:通過animateTo實現(xiàn)動畫并且同時改變currentIndex數(shù)據(jù)中間值來判斷組件zIndex實現(xiàn)切換動畫
.zIndex(index !== this.currentIndex && this.getImgCoefficients(index) === 0 ?
0 : 2 - Math.abs(this.getImgCoefficients(index)))
.width($r('app.string.swiper_stack_width'))
// .height(index !== this.currentIndex ? $r('app.string.swiper_stack_height1') : $r('app.string.swiper_stack_height2'))
.height(
index === this.currentIndex ?
$r("app.string.swiper_stack_height1")
: ((index === this.currentIndex - 1 || index === this.currentIndex + 1) ?
$r("app.string.swiper_stack_height2") :
$r("app.string.swiper_stack_height3"))
)
.onClick(() => {
// 點擊輪播圖Item時，根據(jù)點擊的模塊信息，將頁面放入路由棧
// DynamicsRouter.push(item.routerInfo, item.param);
})
})
}
.onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) => {
clearInterval(this.swiperInterval);
if (isVisible && currentRatio >= 1.0) {
this.swiperInterval = setInterval(() => {
this.startAnimation(true, this.manualSlidingDuration);
}, this.automaticSwitchTime)
}
if (!isVisible && currentRatio <= 0.0) {
clearInterval(this.swiperInterval);
}
})
//高度必須和 app.string.swiper_stack_height1 相同
.height($r('app.string.swiper_stack_height1'))
.width('100%')
.gesture(
PanGesture({ direction: PanDirection.Horizontal })
.onActionStart((event: GestureEvent) => {
clearInterval(this.swiperInterval);
this.startAnimation(event.offsetX < 0, this.automaticSlidingDuration);
})
.onActionEnd(() => {
this.swiperInterval = setInterval(() => {
this.startAnimation(true, this.manualSlidingDuration);
}, this.automaticSwitchTime);
})
)
.alignContent(Alignment.Start)
.backgroundColor($r("app.color.green"))
.clip(true) //裁剪超出 banner 左側的層疊部分
.margin({left: "100vp"})
// .margin({left: -this.offsetXValue * 2}) //整體左移動兩個位移
//底部指示器
Row({ space: 10 }) {
ForEach(this.swiperData, (item: SwiperData, index: number) => {
Ellipse(index !== this.currentIndex ? { width: 8, height: 8 } : { width: 10, height: 8 })
.fill(index !== this.currentIndex ? Color.Black : Color.Red)
.fillOpacity(0.6)
})
}
.margin({ top: 12 })
}
.width('100%')
.height('100%')
.backgroundColor($r("app.color.blue"))
.justifyContent(FlexAlign.Start)
}
}
使用組件 SwiperComponentHalfFold :
import { SwiperComponentHalfFold } from '../components/SwiperComponentHalfFold'
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
// SwiperComponent()
// SwiperComponentThreeEle()
SwiperComponentHalfFold()
}
.width('100%')
}
.height('100%')
}
}
運行結果如下 :
Snipaste_2024-04-13_15-34-29.png
