介紹
在很多應(yīng)用中秒拔，swiper組件每一個(gè)page的高度是不一致的莫矗，所以需要swiper組件下方頁面的高度跟著一起變化。
效果圖預(yù)覽
使用說明
向左滑動(dòng)swiper組件砂缩，上方swiper組件高度變高作谚，下方頁面隨著swiper的變化而平滑的變化。
實(shí)現(xiàn)思路
實(shí)現(xiàn)方案如下：
- 生成四個(gè)Swiper頁面庵芭，來進(jìn)行左右滑動(dòng)妹懒，GridBuilderFunction是生成Swiper的page。
Swiper() {
Column() {
Stack() {
Text('功能欄')
.textAlign(TextAlign.Center)
.margin({ top: $r('app.integer.margin_small'), left: $r('app.integer.default_padding') })
// swiper第一個(gè)page
this.GridBuilderFunction(this.dataPageOne, Const.GRID_DOUBLE_HEIGHT, Const.GRID_TEMPLATE)
}
.alignContent(Alignment.TopStart)
}
// swiper第二個(gè)page
this.GridBuilderFunction(this.dataPageTwo, Const.GRID_DOUBLE_HEIGHT, Const.GRID_TEMPLATE)
// swiper第三個(gè)page
this.GridBuilderFunction(this.dataPageThree, Const.GRID_DOUBLE_HEIGHT, Const.GRID_TEMPLATE)
// swiper第四個(gè)page
this.GridBuilderFunction(this.dataPageFour, Const.GRID_DOUBLE_HEIGHT, Const.GRID_TEMPLATE)
}
- Swiper組件的回調(diào)双吆，通過左右滑動(dòng)的距離來計(jì)算對(duì)應(yīng)的上下位置的變化眨唬，在頁面跟手滑動(dòng)過程中会前，逐幀觸發(fā)onGestureSwipe回調(diào)，swiperDistance發(fā)生變化匾竿。
Swiper{
...
}
.onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) => {
animateTo({
duration: Const.DURATION,
curve: Curve.EaseOut,
playMode: PlayMode.Normal,
onFinish: () => {
logger.info('play end');
}
}, () => { // 通過左右滑動(dòng)的距離來計(jì)算對(duì)應(yīng)的上下位置的變化
if (index === 0 && extraInfo.currentOffset < 0) {
this.swiperDistance = extraInfo.currentOffset / Const.SCROLL_WIDTH * Const.SMALL_FONT_SIZE;
} else if (index === 1 && extraInfo.currentOffset > 0) {
this.swiperDistance = extraInfo.currentOffset / Const.SCROLL_WIDTH * Const.SMALL_FONT_SIZE - Const.SMALL_FONT_SIZE;
} else if (index === 2 && extraInfo.currentOffset < 0) {
this.swiperDistance = extraInfo.currentOffset / Const.SCROLL_WIDTH * Const.GRID_SINGLE_HEIGHT - Const.SMALL_FONT_SIZE;
} else if (index === 3 && extraInfo.currentOffset > 0) {
this.swiperDistance = extraInfo.currentOffset / Const.SCROLL_WIDTH * Const.GRID_SINGLE_HEIGHT - Const.SMALL_FONT_SIZE - Const.GRID_SINGLE_HEIGHT;
}
})
})
- Swiper組件的回調(diào)瓦宜，用來達(dá)到平滑變化的效果，切換動(dòng)畫開始時(shí)觸發(fā)onAnimationStart回調(diào)岭妖。
Swiper{
...
}
.onAnimationStart((_: number, targetIndex: number) => {
animateTo({
duration: Const.DURATION,
curve: Curve.EaseOut,
playMode: PlayMode.Normal,
onFinish: () => {
logger.info('play end');
}
}, () => {
if (targetIndex === 0) {
this.swiperDistance = 0;
} else if (targetIndex === 1 || targetIndex === 2) {
this.swiperDistance = -Const.SMALL_FONT_SIZE;
} else {
this.swiperDistance = -Const.SMALL_FONT_SIZE - Const.GRID_SINGLE_HEIGHT;
}
})
})
高性能知識(shí)點(diǎn)
- 本例中swiper組件綁定onGestureSwipe回調(diào)临庇，該回調(diào)為逐幀回調(diào)函數(shù)，避免在回調(diào)內(nèi)部使用冗余和耗時(shí)操作昵慌。
- 本例中Text綁定visibility屬性方法假夺，進(jìn)而控制組件的顯隱狀態(tài)，避免組件的頻繁創(chuàng)建與銷毀斋攀，提升性能已卷。
工程結(jié)構(gòu)&模塊類型
swipersmoothvariation // har包
|---common
| |---CommonConstants.ets // 提供自定義數(shù)據(jù)
|---pages
| |---MainPage.ets // 滑動(dòng)變化效果實(shí)現(xiàn)頁面
寫在最后
如果你覺得這篇內(nèi)容對(duì)你還蠻有幫助，我想邀請(qǐng)你幫我三個(gè)小忙：
- 點(diǎn)贊淳蔼，轉(zhuǎn)發(fā)悼尾，有你們的 『點(diǎn)贊和評(píng)論』，才是我創(chuàng)造的動(dòng)力肖方。
- 關(guān)注小編闺魏，同時(shí)可以期待后續(xù)文章ing??，不定期分享原創(chuàng)知識(shí)俯画。
- 想要獲取更多完整鴻蒙最新學(xué)習(xí)知識(shí)點(diǎn)析桥，請(qǐng)移步前往小編：
https://gitee.com/MNxiaona/733GH/blob/master/jianshu
