HarmonyOS List组件锚点问题咨询

页面结构为一个List,包含各种item模块,点击顶部的按钮要锚点到对应的item模块。

问题:目前Scroller提供的锚点方法为scrollToIndex,因为商品详情页现在每个item模块都包含在if条件渲染中,每个item的index是动态变化的,无法拿到准确的index。请问上述情况的需求应该如何实现?

HarmonyOS
2024-12-26 14:27:57
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

将scrollToIndex的参数设置成变量,根据不同条件变化时修改成对应的值。

请参考如下demo:

@Entry
@Component
export struct ScrollToIndex {
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
  scroller: Scroller = new Scroller()
  private index1: number = 1
  private index3: number = 3
  private index5: number = 5
  @State @Watch("onIndexChange") condition1: boolean = false
  onIndexChange() {
    if (this.condition1) {
      this.index1 = 0
      this.index3 = 2
      this.index5 = 4
    } else {
      this.index1 = 1
      this.index3 = 3
      this.index5 = 5
    }
  }
  build() {
    Column() {
      Row() {
        Button("index1")
          .onClick(() => {
            this.scroller.scrollToIndex(this.index1)
          })
        Button("index3")
          .onClick(() => {
            this.scroller.scrollToIndex(this.index3)
          })
        Button("index5")
          .onClick(() => {
            this.scroller.scrollToIndex(this.index5)
          })
        Button("change")
          .onClick(() => {
            this.condition1 = !this.condition1
          })
      }.justifyContent(FlexAlign.SpaceBetween)
      List({ space: 20, initialIndex: 0, scroller: this.scroller }) {
        ForEach(this.arr, (item: number) => {
          ListItem() {
            if (this.condition1) {
              if (item % 2 != 0) {
                Text('' + item)
                  .width('100%')
                  .height(100)
                  .fontSize(16)
                  .textAlign(TextAlign.Center)
                  .borderRadius(10)
                  .backgroundColor(0xFFFFFF)
              }
            } else {
              Text('' + item)
                .width('100%')
                .height(100)
                .fontSize(16)
                .textAlign(TextAlign.Center)
                .borderRadius(10)
                .backgroundColor(0xFFFFFF)
            }
          }
        }, (item: string) => item)
      }
      .listDirection(Axis.Vertical) // 排列方向
      .scrollBar(BarState.Off)
      .friction(0.6)
      .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
      .edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring
      .width('90%').friction(0.1)
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xDCDCDC)
    .padding({ top: 5 })
  }
}
分享
微博
QQ
微信
回复
2024-12-26 17:30:02
相关问题
HarmonyOS 两个List互相功能
279浏览 • 1回复 待解决
HarmonyOS ArkTS如何实现跳转功能?
613浏览 • 1回复 待解决
HarmonyOS list组件问题
391浏览 • 1回复 待解决
HarmonyOS 关于页面埋方案的咨询
835浏览 • 1回复 待解决
HarmonyOS List组件沉浸式问题
375浏览 • 1回复 待解决
HarmonyOS Web组件开发问题咨询
829浏览 • 1回复 待解决
HarmonyOS List组件动态刷新数据问题
1468浏览 • 1回复 待解决
HarmonyOS Refresh跟list组件惯性滑动问题
543浏览 • 1回复 待解决
HarmonyOS Web组件List的嵌套使用问题
832浏览 • 1回复 待解决
HarmonyOS 画布问题咨询
764浏览 • 1回复 待解决
HarmonyOS 录像问题咨询
869浏览 • 1回复 待解决
HarmonyOS precompileJavaScript 问题咨询
505浏览 • 1回复 待解决
HarmonyOS卡片问题咨询
840浏览 • 1回复 待解决
HarmonyOS Image问题咨询
478浏览 • 1回复 待解决