基于组件嵌套的滑动

场景一

基于nestedScroll实现WaterFlow与Scroll混合滑动。

方案

描述：外层scroll滑动，内层waterFlow滑动，外层使用嵌套属性.nestedScroll进行联动。

核心代码

Scroll() {
  Column({ space: 2 }) {
    Image($r('app.media.dzdp'))
      .width('100%')
      .height(200)
      .objectFit(ImageFit.Cover)
    WaterFlow() {
      LazyForEach(this.dataSource, (item: number) => {
        FlowItem() {
          Column() {
            Text("旅游景点" + item).fontSize(12).height('16')
            Image($r(`app.media.img_${item % 10}`))
              .objectFit(ImageFit.Fill)
              .width('100%')
              .layoutWeight(1)
          }
        }
        .width('100%')
        .height(this.itemHeightArray[item % 100])
        .backgroundColor(this.colors[item % 5])
      }, (item: string) => item)
    }
    .columnsTemplate("1fr 1fr")
    .columnsGap(10)
    .rowsGap(5)
    .backgroundColor(0xFAEEE0)
    .width('100%')
    .height('100%')
    .nestedScroll(
      {
        scrollForward: NestedScrollMode.SELF_FIRST, // 往末尾端滚动
        scrollBackward: NestedScrollMode.SELF_FIRST // 往起始端滚动
      })
  }
}

场景二

list中嵌套List滑动。

方案

外层list组件和内层list组件基于.nestedScroll进行联动。

核心代码

@Component
struct ItemCompponet {
  build() {
    Column() {
      header({ title: this.title })
      List() {
        LazyForEach(this.generateDataSource(), (data: string, index) => {
          ListItem() {
            Row(){
              Text(data)
                .fontSize(14)
                .backgroundColor(Color.White)
                .fontColor(bgColors[index % bgColors.length])
                .textAlign(TextAlign.Center)
                .onAppear(() => {
                  console.info("appear:" + data)
                })
              Image($r(this.Image))
                .width(40)
                .height(20)
                .margin({
                  left: 20
                })
            }
            .width('100%')
          }
          .height(rowHeight)
        }, (data: string, index) => {
          return data + ' - ' + index.toString()
        })
      }
      .nestedScroll({
        scrollForward:this.posType[this.currentType[0]],
        scrollBackward: this.posType[this.currentType[1]]
      })
      .scrollBar(BarState.Off)
      .cachedCount(10)
      .friction(1.25)
      .edgeEffect(EdgeEffect.None)
    }
  }
}
@Component
export struct ListToList {
  @Builder
  private mainListView() {
    List({ scroller: this.scroll }) {
      ListItem() {
        ItemCompponet({ title: '美食', datas: generateData('美食', 20) ,currentType:[0,1],Image: 'app.media.food'})
      }
      .height('100%')
      .margin({bottom:50})
      ListItem() {
        ItemCompponet({ title: '旅游景点', datas: generateData('旅游景点', 20)  ,currentType:[0,0],Image: 'app.media.travel'})
      }
      .height('100%')
      .margin({bottom:50})
      ListItem() {
        ItemCompponet({ title: '健康', datas: generateData('健康', 20)  ,currentType:[0,0],Image: 'app.media.medicine'})
      }
      .height('100%')
      .margin({bottom:50})

      ListItem() {
        ItemCompponet({ title: '运动', datas: generateData('运动', 20)  ,currentType:[1,0],Image: 'app.media.run'})
      }
      .height('100%')
    }
    .onReachEnd(()=>{
      console.log('is end')
    })
    .divider({ strokeWidth: 10, color: Color.Gray })
    .height("100%")
    .width("100%")
    .scrollBar(BarState.Off)
    .edgeEffect(EdgeEffect.None)
  }
}