是否可以实现滚动锚定的效果？

Question

如题：是否可以实现滚动锚定的效果？

Answer 1

您好，沟通确认后需要实现list滑动后，tabbar跟随切换的效果，可以通过以下方式实现list滚动tabbar跟随变化的，使用一个list作为tabbar，然后根据滑动位置进行联动，

示例代码

class ClassifyModel {
  classifyId: number;
  classifyName: string;
  courseList: Array<string>;

  constructor(classifyId: number, classifyName: string, courseList: Array<string>) {
    this.classifyId = classifyId;
    this.classifyName = classifyName;
    this.courseList = courseList;
  }
}

@Component
struct CardItem {
  @Prop classifyItem: ClassifyModel

  build() {
    Column() {
      Column() {
        Text(this.classifyItem.classifyName).fontSize(40);
      }

      Flex({ wrap: FlexWrap.Wrap }) {
        ForEach(this.classifyItem.courseList, (courseItem: string, index: number) => {
          Button(courseItem).fontSize(30);
        }, (courseItem: string) => $ {
          // courseItem
        }

        )
        ;
      };
    }.alignItems(HorizontalAlign.Start)
  }
}


@Entry
@Component
struct IndexPage {
  @State currentClassify: number = 0; // selected classify index.
  @State requestSuccess: boolean = false; // is loading data.
  private classifyList: Array<ClassifyModel> = [];
  private classifyScroller: Scroller = new Scroller();
  private scroller: Scroller = new Scroller();

  aboutToAppear() {
    this.classifyList.push(new ClassifyModel(1, '热门', ['新浪', '热门', '关注', '新浪', '热门', '关注', '新浪', '热门', '关注']))
    this.classifyList.push(new ClassifyModel(2, '体育', ['游戏', '动漫']))
    this.classifyList.push(new ClassifyModel(3, '轻松', ['八卦', '宠物', '八卦', '宠物', '八卦', '宠物']))
    this.classifyList.push(new ClassifyModel(4, '科技', ['星座', '宠物', '八卦', '宠物', '八卦', '宠物']))
    this.classifyList.push(new ClassifyModel(5, '生活', ['奢侈品', '数码', '八卦', '宠物', '八卦', '宠物']))
    this.classifyList.push(new ClassifyModel(6, '人文', ['航天', '宠物', '八卦', '宠物', '八卦', '宠物']))
  }

  //二级联动逻辑
  classifyChangeAction(startIndex: number, endIndex: number, isClassify: boolean) {
    if (this.currentClassify !== startIndex) {
      this.currentClassify = startIndex;
      if (isClassify) {
        this.scroller.scrollToIndex(startIndex);
      } else {
        this.classifyScroller.scrollToIndex(startIndex - 2);
      }
    }
  }

  build() {
    Scroll() {
      Column() {
        // 类似tabbar
        List({ scroller: this.classifyScroller }) {
          ForEach(this.classifyList, (item: ClassifyModel, index: number) => {
            ListItem() {
              Column() {
                Text(item.classifyName)
                Divider()
                  .color('#000000').strokeWidth(3)
                  .visibility(index == this.currentClassify ? Visibility.Visible : Visibility.Hidden)
              }.justifyContent(FlexAlign.Center).width('20%').height('100%')
            }
            .onClick(() => {
              this.classifyChangeAction(index, 0, true);
            })
          }, (item: ClassifyModel) => item.classifyName + this.currentClassify)
        }.height(50).listDirection(Axis.Horizontal).scrollBar(BarState.Off)

        List({ scroller: this.scroller }) {
          ForEach(this.classifyList, (classifyItem: ClassifyModel, index: number) => {
            if (index != this.classifyList.length - 1) {
              ListItem() {
                CardItem({ classifyItem: classifyItem })
              }
            } else {
              ListItem() {
                CardItem({ classifyItem: classifyItem }).height('100%')
              }
            }
          }, (item: ClassifyModel) => `${item.classifyId}`)
        }
        .nestedScroll({
          scrollForward: NestedScrollMode.PARENT_FIRST,
          scrollBackward: NestedScrollMode.SELF_FIRST
        })
        .height('calc(100% - 50vp)')
        .edgeEffect(EdgeEffect.Spring)
        .onScrollIndex((start: number, end: number) => this.classifyChangeAction(start, end, false))
      }
    }
  }
}