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)实现了蓝绿交替的异高效果。关键点在于:

  1. 通过calc(100% - 50vp)实现了动态高度控制
  2. ScrollSnapAlign.START确保了滚动对齐效果
  3. chainAnimation使滚动过渡更平滑

相比Swiper,List的优势在于:

  • 原生支持动态高度子项
  • 滚动性能更好(通过LazyForEach优化)
  • 支持更丰富的滚动控制参数

建议可以进一步优化:

  1. 考虑使用Column替代Stack作为ListItem根布局
  2. 为不同高度项添加transition动画效果
  3. 根据实际场景调整flingSpeedLimit值

这种实现方式比Swiper更适合处理复杂高度不一的滑动场景。

回到顶部