HarmonyOS list滑动问题

list横向滑动,调用this.scroller.scrollToIndex(8,false,ScrollAlign.CENTER)滑动到指定的索引后在中间展示,想往右边再滑动一点该怎么做?

HarmonyOS
2024-08-04 14:58:03
2619浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
dickhome

目前scrollToIndex只支持start,center等指定位置,

1.可以尝试改变子组件 ‘红线位置’,继续使用该事件;

2.使用scrollTo,指定位置demo1

import { curves }from '@kit.ArkUI' 
@Entry 
@Component 
struct Test67 { 
  @State initialIndex: number = 0; 
  scrollerForList: Scroller = new Scroller(); 
  @State arr: number[] = [1,2,3,4,5,6,7,8,9,10] 
 
  build() { 
    Column() { 
      Button("click").onClick(() => { 
        let curve = Curves.interpolatingSpring(10, 1, 228, 30) //创建一个阶梯曲线 
        const redLine = 30; //根据实际红线log调整 回滚根据实际加个判断偏移量 
        let num = 100 * (8 - this.initialIndex) + redLine; //获取当前index,当前滚动偏移量,目标item index,计算偏移量 
        const xOffsetNow: number = this.scrollerForList.currentOffset().xOffset; 
        this.scrollerForList.scrollTo({ xOffset: xOffsetNow + num, yOffset:  0, animation: { duration: 1000, curve: curve } }) 
      }) 
      List({ space: 20, initialIndex: this.initialIndex, scroller: this.scrollerForList }) { 
        ForEach(this.arr, (item: number) => { 
          ListItem() { 
            Text(item.toString()).width(100).height(50).backgroundColor(Color.Pink) 
          } 
          .borderRadius(10) 
          .width('30%') 
          .height('80%') 
        }) 
      } 
      // 滑动位置实时监听 
      .onScrollIndex((_start, _end, center) => { 
        // showToast('center='+center) 
        this.initialIndex = center 
      }) 
      .chainAnimation(true) 
      .alignListItem(ListItemAlign.Center) 
      .edgeEffect(EdgeEffect.Spring) 
      .listDirection(Axis.Horizontal) 
      .height('100%') 
      .width('100%') 
      .margin({ top: 20 }) 
      .scrollSnapAlign(ScrollSnapAlign.CENTER) 
      .borderRadius(10) 
      .backgroundColor(Color.Transparent) 
    } 
  } 
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.

scrollTo API参考链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-scroll-0000001815927632#ZH-CN_TOPIC_0000001815927632__scrollto

分享
微博
QQ
微信
回复
2024-08-05 12:23:23
相关问题
HarmonyOS Scroll嵌套List滑动问题
779浏览 • 1回复 待解决
HarmonyOS Refresh跟list组件惯性滑动问题
849浏览 • 1回复 待解决
HarmonyOS 滑动问题
601浏览 • 1回复 待解决
HarmonyOS scroll滑动问题
1115浏览 • 1回复 待解决
HarmonyOS 嵌套滑动问题
1082浏览 • 1回复 待解决
HarmonyOS Slider滑动问题
1240浏览 • 1回复 待解决
HarmonyOS onToch事件滑动问题
634浏览 • 1回复 待解决
TabContent内web组件滑动问题
799浏览 • 2回复 待解决
HarmonyOS Tabs和Web嵌套左右滑动问题
903浏览 • 1回复 待解决
仿射变换后列表滑动问题
974浏览 • 1回复 待解决
HarmonyOS list 嵌套web滑动切换问题
1219浏览 • 1回复 待解决
HarmonyOS scroll滚动问题
700浏览 • 1回复 待解决
HarmonyOS bindSheet拖动问题
493浏览 • 1回复 待解决
HarmonyOS list无法滑动
510浏览 • 1回复 待解决
HarmonyOS List联动滑动
599浏览 • 1回复 待解决
HarmonyOS LongPressGesture手势移动问题
1066浏览 • 1回复 待解决
HarmonyOS 悬浮按钮拖动问题
1281浏览 • 1回复 待解决
HarmonyOS List组件滑动限制为1页的问题
459浏览 • 1回复 待解决
HarmonyOS Scroll组件滚动问题
1422浏览 • 1回复 待解决