HarmonyOS鸿蒙Next中scrollToIndex失效，即使是List使用

HarmonyOS鸿蒙Next中scrollToIndex失效，即使是List使用

webTabsSheetScrollControl: Scroller = new Scroller();
@Builder
SheetBuilder() {
  List({initialIndex: 10,scroller:this.webTabsSheetScrollControl}) {
    ForEach(this.webTabs, (webTab: webTab) => {
      ListItem(){
        Stack({ alignContent: Alignment.Top }) {
          Row() {
            Image(webTab.favicon).width('10%').margin({ left: 8, right: 4 })            // 图片获取失败，打印结果
              .onError(() => {
                console.info('load image fail')
              })

            Text(webTab.title)
              .width('60%')
              .fontSize(12)
              // .margin({ left: 2, right: 22 })
              .textOverflow({
                overflow: webTab.id === this.currentTabId ? TextOverflow.MARQUEE : TextOverflow.Ellipsis
              })
              .maxLines(1)

            Button({ type: ButtonType.Circle, stateEffect: true }) {
              SymbolGlyph($r('sys.symbol.xmark'))
                .fontColor([$r('sys.color.font_primary')])
                .fontWeight(FontWeight.Bold)
                .fontSize(14)
                .margin(4)
            }
            .width('15%')
            .margin({ left: 8, right: 8 })
            .backgroundColor($r('sys.color.comp_background_tertiary'))
            .clickEffect({ level: ClickEffectLevel.HEAVY, scale: 0.5 })
            .onClick(() => {
              this.deleteTab(webTab.id);
            })
          }
          .width('100%')
          .height('40vp')
          .backgroundBlurStyle(BlurStyle.Thick)
          .zIndex(1)

          Image(webTab.preview)
            .width('100%')
            .height('100%')
            .objectFit(ImageFit.Fill)
        }
        .width('100%')
        .height('280vp')
        .backgroundColor($r('sys.color.comp_background_tertiary'))
        .border({
          radius: '20vp',
          width: this.currentTabId == webTab.id ? 4 : 0,
          color: this.currentTabId == webTab.id ? $r('sys.color.icon_sub_emphasize') : ''
        })
        .animation({ curve: curves.springMotion() })
        .clip(true)
        .clickEffect({ level: ClickEffectLevel.HEAVY, scale: 0.5 })
        .onClick(() => {
          this.setTab(webTab.id);
          this.isShowWebTabsSheet = false;
        })
      }
      .padding({ bottom:10,right:5,left:5 })
      .transition(this.webTabsEffect)
    })
  }
  .height(Math.round(this.webTabs.length / 2) * 300 + 'vp')
  .animation({ curve: curves.springMotion() })
  .padding(10)
  .lanes(2)
}

// 调用

this.webTabsSheetScrollControl.scrollToIndex(4);

更多关于HarmonyOS鸿蒙Next中scrollToIndex失效，即使是List使用的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

感谢您的提问，为了更快解决您的问题，麻烦请补充以下信息： 复现代码（如最小复现demo）； 版本信息（如：开发工具、手机系统版本信息）；

当前使用API17的IDE和API17的手机系统，运行下面的demo，可以正常使用 scrollToIndex 跳转。

import { LengthMetrics } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column() {
      Text(this.message)
        .id('HelloWorld')
        .fontSize($r('app.float.page_text_font_size'))
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(() => {
          this.message = 'Welcome';
        })
      this.SheetBuilder();
    }
    .height('100%')
    .width('100%')
  }

  @State listPosition: number = 0; // 0代表滚动到List顶部，1代表中间值，2代表滚动到List底部。
  private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  private scrollerForScroll: Scroller = new Scroller();
  private scrollerForList: Scroller = new Scroller();

  @Builder
  SheetBuilder(){
    Column() {
      Text("Scroll Area点击跳转")
        .width("100%")
        .height("20%")
        .backgroundColor(0X330000FF)
        .fontSize(16)
        .textAlign(TextAlign.Center)
        .onClick(() => {
          this.scrollerForList.scrollToIndex(5);
        })

      List({ space: 20, scroller: this.scrollerForList }) {
        ForEach(this.arr, (item: number) => {
          ListItem() {
            Text("ListItem" + item)
              .width("100%")
              .height("100%")
              .borderRadius(15)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .backgroundColor(Color.White)
          }.width("100%").height(100)
        }, (item: string) => item)
      }
      .width("100%")
      .height("50%")
      .edgeEffect(EdgeEffect.None)
      .friction(0.6)
      .onReachStart(() => {
        this.listPosition = 0;
      })
      .onReachEnd(() => {
        this.listPosition = 2;
      })
      .onScrollFrameBegin((offset: number) => {
        if ((this.listPosition == 0 && offset <= 0) || (this.listPosition == 2 && offset >= 0)) {
          this.scrollerForScroll.scrollBy(0, offset);
          return { offsetRemain: 0 };
        }
        this.listPosition = 1;
        return { offsetRemain: offset };
      })

      Text("Scroll Area")
        .width("100%")
        .height("40%")
        .backgroundColor(0X330000FF)
        .fontSize(16)
        .textAlign(TextAlign.Center)
    }
  }

}

更多关于HarmonyOS鸿蒙Next中scrollToIndex失效，即使是List使用的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


你好，我已查明问题，原因是我list组件采用的高度是动态计算的，当我将高度设为100%时就可以正常设置滚动下标了，总之，感谢你的回复！

不对，

@Builder 装饰器里的list或者scroll就是不能控制滚动距离。。即使加了响应式的装饰器

@Local webTabsScrollControl: Scroller = new Scroller();

加个响应式的注解就好了，虽然不知道为什么文档里都不加。。。

有人吗

在HarmonyOS Next中，scrollToIndex 失效可能是由于布局未完成或索引超出范围导致。请确保在布局完成后调用该方法，并检查索引值是否在有效范围内。确认 List 组件已正确初始化且数据源已加载。

在HarmonyOS Next中，scrollToIndex失效通常与List组件的渲染机制有关。从代码来看，您使用了lanes(2)属性，这会创建多列布局，而scrollToIndex在默认情况下可能无法正确计算多列布局中的索引位置。

建议检查以下两点：

  1. 确保List的scroller参数正确绑定到Scroller实例
  2. 尝试使用scrollTo方法替代，通过计算具体位置进行滚动

另外，List的高度计算方式Math.round(this.webTabs.length / 2) * 300 + 'vp'可能存在精度问题，建议使用准确的数值计算。

可以尝试在调用scrollToIndex前添加微小延迟，确保List已完成布局渲染。

回到顶部