Scroller的fling实现有什么好的方案

实现惯性滑动。


HarmonyOS
2024-05-26 12:42:56
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
anlan001

使用的核心API

核心代码解释

常规滑动为空闲状态后,Scroller().scrollTo()继续向下滑动。

@Entry 
@Component 
struct index_231127214143064 { 
  @State arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20] 
  @State editFlag: boolean = false 
  scroller: Scroller = new Scroller() 
  private state: boolean = true 
  
  build() { 
    Column() { 
      List({ space: 20, initialIndex: 0, scroller: this.scroller }) { 
        ForEach(this.arr, (item: number, index?: number) => { 
          ListItem() { 
            Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { 
              Text('' + item) 
                .width('100%') 
                .height(80) 
                .fontSize(20) 
                .textAlign(TextAlign.Center) 
                .borderRadius(10) 
                .backgroundColor(0xFFFFFF) 
                .flexShrink(1) 
              if (this.editFlag) { 
                Button() { 
                  Text("delete").fontSize(16) 
                }.width('30%').height(40) 
                .onClick(() => { 
                  if (index != undefined) { 
                    console.info(this.arr[index] + 'Delete') 
                    this.arr.splice(index, 1) 
                    console.info(JSON.stringify(this.arr)) 
                    this.editFlag = false 
                  } 
                }).stateEffect(true) 
              } 
            } 
          }.borderWidth(1) 
        }, (item: string) => item) 
      } 
      .onAreaChange((oldValue: Area, newValue: Area) => { 
        console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`) 
      }) 
      .width('90%') 
      .scrollBar(BarState.Off) 
      .friction(0.6) 
      // .onScrollFrameBegin((offset: number, state: ScrollState) => { 
      //   console.log("111111:" + state) 
      //   return { offsetRemain: offset } 
      // }) 
      .onScroll((scrollOffset: number, scrollState: ScrollState) => { 
        console.log('111111:' + scrollOffset) 
        // 常规滑动后空闲状态,3s下滑100vp距离 
        if (scrollState == ScrollState.Idle && this.state) { 
          this.state = false 
          this.scroller.scrollTo({ 
            xOffset: 0, 
            yOffset: scrollOffset + 100, //下滑100vp的距离 
            animation: { 
              duration: 3000, 
            } 
          }) 
        } 
        console.info(`onScroll scrollState = ScrollState` + scrollState + `, scrollOffset = ` + scrollOffset) 
      }) 
    }.width('100%') 
  } 
}

适配的版本信息

  •  IDE:DevEco    Studio 4.1.1.300
  •  SDK:4.1.2.1
分享
微博
QQ
微信
回复
2024-05-27 16:24:23
相关问题
屏幕旋转计算,有什么方案
442浏览 • 1回复 待解决
taskpool使用 ,谁有方案
230浏览 • 1回复 待解决
转场动画,谁有方案吗?
178浏览 • 1回复 待解决
PopWindow效果实现有哪些?
301浏览 • 1回复 待解决
panGesture结合动画实现fling效果
402浏览 • 1回复 待解决
har和hsp转换,有方案吗?
271浏览 • 1回复 待解决
Text模拟隐私协议,有方案吗?
409浏览 • 1回复 待解决
本地收发消息实践,谁有方案
256浏览 • 1回复 待解决
连接网络信息获取有方案吗?
295浏览 • 1回复 待解决
SM4 CBC模式加解密,有方案吗?
480浏览 • 1回复 待解决
Mac下有什么编程字体?
1179浏览 • 1回复 待解决
Binder链接池实现有哪些方法?
392浏览 • 1回复 待解决
页面截图功能,有什么方法?
377浏览 • 1回复 待解决
瀑布流场景推荐实现方案
710浏览 • 1回复 待解决
引导遮罩效果实现最佳方案
339浏览 • 1回复 待解决