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

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

HarmonyOS
2024-06-05 21:25:14
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
morning_dxm

您好,沟通确认后需要实现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)) 
      } 
    } 
  } 
}
分享
微博
QQ
微信
回复
2024-06-06 21:51:53
相关问题
arkts 什么时候可以实现模糊效果
1657浏览 • 1回复 待解决
有谁知道是否支持实现3D效果
662浏览 • 1回复 待解决
元服务是否可以全程使用js实现
519浏览 • 1回复 待解决
为何RichText组件中内容可以滚动
675浏览 • 1回复 待解决
如何实现列表页单选效果
893浏览 • 0回复 待解决
PopWindow效果实现有哪些?
274浏览 • 1回复 待解决
canvas如何实现水印效果
353浏览 • 1回复 待解决
如何实现嵌套滚动技术
375浏览 • 1回复 待解决