二级列表联动

news2024/11/7 16:23:30

介绍

本示例主要介绍了List组件实现二级联动（Cascading List）的场景。该场景多用于商品种类的选择、照片不同类型选择等场景。

效果图

使用说明：

滑动二级列表侧控件（点击没用），一级列表随之滚动。（当最后一次触屏在一级列表，则滑动二级列表，一级列表固定不动）
点击一级列表（滑动没用），二级列表随之滚动。
点击一级列表可视区域边界时，选中类别向中间移动

实现思路

使用两个List。
一二级列表分别绑定不同的Scroller对象，一级列表(tagLists)绑定classifyScroller对象，二级列表绑定scroller对象。
维护records数组，一个item数量的前缀和，records[i]表示第i+1种类别的第一个item之前有多少个item，这个数值等于records[i]表示第i+1种类别的第一个item在itemList的下标
使用List的onTouch，.onScrollIndex组件方法,判断最后一次触屏是否在一级列表，和一级列表的可视区域
实现itemFindClassIndex(itemIndex:number)，itemFindClassIndex(itemIndex:number)；
点击一级列表后，通过一级列表的索引获取二级列表的索引，调用scrollToIndex方法将一二级列表滚动到指定索引值
滑动二级列表触发组件滚动事件后，获取到列表可视区域第一个item对应的索引值，通过二级列表索引获取一级列表索引，调用scrollToIndex方法将一级列表滚动到指定索引值
监听curClass变量，onClassChange点击一级列表可视区域边界时，一级列表将选中类别向中间移动

样例代码

interface IRange {
  start: number;
  end: number;
}//可视区间的开始和结尾
@Entry
@Component
struct Index {
  @State itemList:string[]=[];				// 二级列表数据
  @State classList:string[]=[];				// 一级列表数据
  @State @Watch('onClassChange') curClass:number=-1//当前类别下标
  readonly eachClassCount:number[]=[6,4,4,6,5,6,4,4,6,5];//每一个类别item的数量
  private classScroller:Scroller=new Scroller();
  private itemScroller:Scroller=new Scroller();
  private records:number[]=[];  			//一个前缀和 二级列表分组count数量
  private classVisualRange:IRange={start:0,end:0};
  private isClickClassList:boolean=false; 	//上一次点击是否点击的是类别 true:滑动二级列表，一级列表不跟着一起变化 flase：滑动二级列表，一级列表跟着一起变化

  aboutToAppear(): void {
    /*
       造数据
     */
    for(let i=0;i<10;i++){
      this.classList[this.classList.length]=`第${i+1}类`
      for(let j=0;j<this.eachClassCount[i];j++){
        this.itemList[this.itemList.length]=`第${i+1}类 第${j+1}个`
      }
    }
    this.records[0]=0;
    for(let i=1;i<=10;i++){//最后多一个，方便二级item寻找一级class
      this.records[i]=this.records[i-1]+this.eachClassCount[i-1];
    }
  }
  
  itemFindClassIndex(itemIndex:number):number{
    let classIndex:number=0;
    for(let i=0;i<10;i++){
      if(this.records[i]<=itemIndex&&itemIndex<this.records[i+1]){
        classIndex=i;
        break;
      }
    }
    return classIndex;
  }
  classFindItemIndex(classIndex:number):number{
    return this.records[classIndex];
  }
  onClassChange(){
    const start=this.classVisualRange.start,end=this.classVisualRange.end;
    if(this.curClass===start||this.curClass===start+1){
      this.classScroller.scrollToIndex(Math.max(0,this.curClass-1),true)//向上一格作为可视区域第一个
    }
    else if(this.curClass===end||this.curClass===end-1){
      this.classScroller.scrollToIndex(Math.min(10,this.curClass+1),true)//向下一格作为可视区域第一个
    }
  }

  build() {
    Row() {
      /**
       * 一级列表
       */
      List({scroller:this.classScroller,space:10, initialIndex: 0}){
        ForEach(this.classList,(classItem:string,index:number)=>{
          ListItem(){
            Text(classItem).width('100%').height('15%').backgroundColor(this.curClass===index?Color.Green:Color.Pink)
              .onClick(()=>{
                let itemIndex=this.classFindItemIndex(index);
                this.curClass=index;
                this.itemScroller.scrollToIndex(itemIndex,true)
              })
          }
        })
      }.width('30%').height('100%')
      .margin({left:20,right:20}).scrollBar(BarState.Off)
      .onTouch(()=>{
        this.isClickClassList=true;
      })
      .onScrollIndex((start,end)=>{
        this.classVisualRange.start=start;
        this.classVisualRange.end=end;
      })

      /**
       * 二级列表
       */
      List({scroller:this.itemScroller,space:10}){
        ForEach(this.itemList,(item:string,index:number)=>{
          ListItem(){
            Text(item).width('100%').height('17%').backgroundColor('#999999')
              .onClick(()=>{
                let classIndex=this.itemFindClassIndex(index);
               this.curClass=classIndex;
                this.classScroller.scrollToIndex(classIndex,true)
              })
          }
        })
      }.width('70%').height('100%').margin({left:20,right:20}).scrollBar(BarState.Off)
      .onTouch(()=>{
        this.isClickClassList=false;
      })
        // 性能知识点:onScrollIndex事件在列表滚动时频繁执行，在回调中需要尽量减少耗时和冗余操作，例如减少不必要的日志打印
      .onScrollIndex((start,end)=>{//二级列表滑动，判断一级列表是否一起滑动
        if(!this.isClickClassList){
          let classIndex=this.itemFindClassIndex(start);
          this.curClass=classIndex;
          this.classScroller.scrollToIndex(classIndex,true)
          /**
           * scrollToIndex(value: number, smooth?: boolean, align?: ScrollAlign)
           * 性能知识点：开启smooth动效时，会对经过的所有item进行加载和布局计算，当大量加载item时会导致性能问题。
           */
        }
      })
    }
    .height('100%')
    .width('100%')
  }
}