列表滑动惯性处理问题

目前用List实现横向翻页效果, 我发现我不做额外设置的时候, 一次滑动之后, 因为滑动过快会划过好多页, 但是List提供了friction参数进行控制, 但是设置之后效果很不理想, 有时候滑动不会触发翻页, 而且friction参数不是一个运动相关的属性值, 无法直接设置一个明确的值来满足所有的滑动场景. Scroller也有类似参数speedLimit控制, 但是效果也不理想。

HarmonyOS
2024-10-11 11:31:51
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zxjiu

参考以下代码:

class MyDataSource implements IDataSource {  
  private list: number[] = []  
  
  constructor(list: number[]) {  
    this.list = list  
  }  
  
  totalCount(): number {  
    return this.list.length  
  }  
  
  getData(index: number): number {  
    return this.list[index]  
  }  
  
  registerDataChangeListener(listener: DataChangeListener): void {  
  }  
  
  unregisterDataChangeListener() {  
  }  
}  
  
@Entry  
@Component  
struct SwiperExample {  
  private swiperController: SwiperController = new SwiperController()  
  private data: MyDataSource = new MyDataSource([])  
  @State myIndex: number = 1;  
  
  aboutToAppear(): void {  
    let list: number[] = []  
    for (let i = 1; i <= 10; i++) {  
      list.push(i);  
    }  
    this.data = new MyDataSource(list)  
  }  
  
  build() {  
    Column({ space: 5 }) {  
      Row({ space: 12 }) {  
        LazyForEach(this.data, (item: string, index: number) => {  
          Button((index + 1).toString())  
            .onClick(() => {  
              this.myIndex = index  
            })  
        })  
      }  
  
      Swiper(this.swiperController) {  
        LazyForEach(this.data, (item: string) => {  
          Text(item.toString())  
            .width('90%')  
            .height(160)  
            .backgroundColor(0xAFEEEE)  
            .textAlign(TextAlign.Center)  
            .fontSize(30)  
        }, (item: string) => item)  
      }  
      .cachedCount(2)  
      .index(this.myIndex)  
      .autoPlay(false)  
      .loop(true)  
      .duration(300)  
      .itemSpace(0)  
      .indicator(false)  
      .curve(Curve.Linear)  
      .onChange((index: number) => {  
        console.info("onChange:" + index.toString())  
        this.myIndex = index  
      })  
      .onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) => {  
        console.info("index: " + index)  
        console.info("current offset: " + extraInfo.currentOffset)  
      })  
      .onAnimationStart((index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) => {  
        console.info("index: " + index)  
        console.info("targetIndex: " + targetIndex)  
        console.info("current offset: " + extraInfo.currentOffset)  
        console.info("target offset: " + extraInfo.targetOffset)  
        console.info("velocity: " + extraInfo.velocity)  
      })  
      .onAnimationEnd((index: number, extraInfo: SwiperAnimationEvent) => {  
        console.info("index: " + index)  
        console.info("current offset: " + extraInfo.currentOffset)  
      })  
    }.width('100%')  
    .margin({ top: 5 })  
  }  
}
分享
微博
QQ
微信
回复
2024-10-11 16:22:14
相关问题
HarmonyOS RN onBackP ress() 返回处理问题
175浏览 • 1回复 待解决
网络请求数据处理问题
374浏览 • 1回复 待解决
Canvas制作图表如何实现滑动惯性
441浏览 • 1回复 待解决
仿射变换后列表滑动问题
274浏览 • 1回复 待解决
列表滑动鸿蒙推荐ux设计
1706浏览 • 1回复 待解决
滑动嵌套事件冲突处理
268浏览 • 0回复 待解决
键盘拉起时列表无法上下滑动
2160浏览 • 1回复 待解决
HarmonyOS 滚动列表问题
141浏览 • 0回复 待解决
HarmonyOS 滑动冲突问题
475浏览 • 1回复 待解决
如何处理tabs嵌套web滑动场景
486浏览 • 1回复 待解决
HarmonyOS 列表刷新问题
618浏览 • 1回复 待解决
HarmonyOS 列表List相关问题
442浏览 • 1回复 待解决