HarmonyOS鸿蒙Next中Swiper添加异高子组件效果不好,发现可以用list实现,分享出来
HarmonyOS鸿蒙Next中Swiper添加异高子组件效果不好,发现可以用list实现,分享出来
class MyDataSource implements IDataSource {
totalCount(): number {
return 100;
}
getData(index: number): number {
return index;
}
registerDataChangeListener(listener: DataChangeListener): void {
}
unregisterDataChangeListener() {
}
}
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
private swiperController: SwiperController = new SwiperController()
private data: MyDataSource = new MyDataSource()
private scrollerForList: Scroller = new Scroller()
private array: number[] = []
aboutToAppear(): void {
for (let i = 0; i < 20; i++) {
this.array.push(i)
}
}
build() {
List({ scroller: this.scrollerForList }) {
LazyForEach(this.data, (item: number) => {
ListItem() {
if (item % 2 == 0) {
Stack() {
}
.backgroundColor(Color.Blue)
.width('100%')
.height('100%')
} else {
Stack() {
}
.backgroundColor(Color.Green)
.width('100%')
.height('calc(100% - 50vp)')
}
},
(item: number) => JSON.stringify(item)
}
)
.flingSpeedLimit(1000)
.listDirection(Axis.Vertical)
.scrollSnapAlign(ScrollSnapAlign.START)
.chainAnimation(true)
.width('100%')
.height('100%')
.friction(5)
}
}
更多关于HarmonyOS鸿蒙Next中Swiper添加异高子组件效果不好,发现可以用list实现,分享出来的实战教程也可以访问 https://www.itying.com/category-93-b0.html
2 回复
在HarmonyOS鸿蒙Next中,Swiper组件在处理异高子组件时效果不佳,可能导致布局错乱或滑动不流畅。通过改用List组件,可以更好地管理不同高度的子组件,确保布局的准确性和滑动的平滑性。List组件支持动态调整子组件高度,适合用于展示异高内容。这种方法简单易行,能够有效解决Swiper在处理异高子组件时的问题。
更多关于HarmonyOS鸿蒙Next中Swiper添加异高子组件效果不好,发现可以用list实现,分享出来的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS Next中,使用List替代Swiper实现异高子组件确实是个不错的方案。从代码来看,您通过LazyForEach动态渲染不同高度的ListItem,利用条件判断(item % 2)实现了蓝绿交替的异高效果。关键点在于:
- 通过
calc(100% - 50vp)
实现了动态高度控制 ScrollSnapAlign.START
确保了滚动对齐效果chainAnimation
使滚动过渡更平滑
相比Swiper,List的优势在于:
- 原生支持动态高度子项
- 滚动性能更好(通过LazyForEach优化)
- 支持更丰富的滚动控制参数
建议可以进一步优化:
- 考虑使用Column替代Stack作为ListItem根布局
- 为不同高度项添加transition动画效果
- 根据实际场景调整flingSpeedLimit值
这种实现方式比Swiper更适合处理复杂高度不一的滑动场景。