【HarmonyOS NEXT】滑动选中放大卡片效果
2025-06-30 23:24:31
105次阅读
0个评论
【HarmonyOS NEXT】滑动选中放大卡片效果
##鸿蒙开发能力 ##HarmonyOS SDK应用服务##鸿蒙金融类应用 (金融理财#
一、功能效果:
1.横向滚动列表,手势左右滑动,居中选中会放大。
2. 左边滑动到首部,在居中位置。同理,尾部也在居中位置。
3.放大选中和滑动滚动效果丝滑。
二、开发思路:
【完整代码请参考章节三】
1.使用list实现横向滚动列表的效果
@Builder ListView(){
List({ space: 20, initialIndex: this.currentSwiperIndex }) {
}
.width('100%')
.height(270)
.chainAnimation(true)
.alignListItem(ListItemAlign.End)
.edgeEffect(EdgeEffect.None)
.listDirection(Axis.Horizontal)
.scrollSnapAlign(ScrollSnapAlign.CENTER)
.scrollBar(BarState.Off)
}
2.根据数据量决定是否使用赖加载来提升性能,若数据量较小,可以直接使用Foreach循环。
LazyForEach(this.mListData, (item: string, index: number) => {
ListItem() {
Column() {
Image($r("app.media.icon_img1"))
.width(px2vp(350))
.height(px2vp(600))
.borderWidth(px2vp(2))
.borderColor(Color.Red)
.backgroundColor(Color.Black)
}
.backgroundColor(Color.Red)
.width(px2vp(350))
.height(px2vp(600))
.animation({
duration: 200,
curve: Curve.Linear,
})
.margin({ bottom: 30 })
.zIndex(10)
}
})
3.居中项放大使用放大动画实现,居中index根据list回调来更新
ListItem() {}
.scale({
x: this.currentSwiperIndex === index ? this.maxScale : this.minScale,
y: this.currentSwiperIndex === index ? this.maxScale : this.minScale,
})
List({ space: 20, initialIndex: this.currentSwiperIndex }) {}
.onScrollIndex((firstIndex: number, lastIndex: number, centerIndex: number) => {
this.currentSwiperIndex = centerIndex
})
三、DEMO示例代码:
@Entry
@Component
struct Index {
@State mListData: MyDataSource = new MyDataSource();
@State maxScale: number = 1.2;
@State minScale: number = 0.8;
@State currentSwiperIndex: number = 0;
aboutToAppear() {
for (let i = 0; i <= 20; i++) {
this.mListData.pushData(`Hello ${i}`)
}
}
@Builder ListView(){
List({ space: 20, initialIndex: this.currentSwiperIndex }) {
LazyForEach(this.mListData, (item: string, index: number) => {
ListItem() {
Column() {
Image($r("app.media.icon_img1"))
.width(px2vp(350))
.height(px2vp(600))
.borderWidth(px2vp(2))
.borderColor(Color.Red)
.backgroundColor(Color.Black)
}
.backgroundColor(Color.Red)
.width(px2vp(350))
.height(px2vp(600))
.scale({
x: this.currentSwiperIndex === index ? this.maxScale : this.minScale,
y: this.currentSwiperIndex === index ? this.maxScale : this.minScale,
})
.animation({
duration: 200,
curve: Curve.Linear,
})
.margin({ bottom: 30 })
.zIndex(10)
}
})
}
.width('100%')
.height(270)
.chainAnimation(true)
.alignListItem(ListItemAlign.End)
.edgeEffect(EdgeEffect.None)
.listDirection(Axis.Horizontal)
.scrollSnapAlign(ScrollSnapAlign.CENTER)
.scrollBar(BarState.Off)
.onScrollIndex((firstIndex: number, lastIndex: number, centerIndex: number) => {
this.currentSwiperIndex = centerIndex
})
}
build() {
Column(){
SlidingCardView()
this.ListView()
}
.width("100%")
.height("100%")
}
}
00
- 1回答
- 0粉丝
- 0关注
相关话题
- 【HarmonyOS NEXT】层级轮播卡片效果
- 鸿蒙特效教程10-卡片展开/收起效果
- 【HarmonyOS Next开发】静态服务卡片
- 鸿蒙开发:自定义切换动画实现Swiper层叠滑动效果
- 41. [HarmonyOS NEXT Row案例九] 打造流畅可滑动列表项:滑动操作按钮的高级实现
- 鸿蒙Next Scroll+List+Tabs实现关联滑动
- HarmonyOS实战:Tab顶部滑动悬停功能实现
- 【HarmonyOS】头像圆形裁剪功能之手势放大缩小,平移,双击缩放控制(三)
- 鸿蒙--Canvas 图片滑动验证
- 鸿蒙Next滑动条Slider详细总结一文了解
- 鸿蒙Next自定义双滑块滑动条实现方案
- 13.HarmonyOS NEXT流式卡片列表实现指南:Flex多行布局详解
- OpenHarmony 实战卡片开发 01
- OpenHarmony 实战卡片开发 02
- OpenHarmony 实战卡片开发 03