京东一个导航栏滑动变换效果

import { LengthMetrics } from '@kit.ArkUI'


@Entry
@Component
struct Test {
  @State shift:boolean=false;
  private scroller:Scroller=new Scroller();
  @Builder topTab() {
    if(this.shift==false){
      Row() {
        Swiper() {
          Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap,space:{main:LengthMetrics.vp(10),
          cross:LengthMetrics.vp(10)}}) {
            ForEach("0123456789".split(''), (item: string) => {
              Text(item).width(80).height(80).backgroundColor(Color.Pink)
            })
          }
          Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap,space:{main:LengthMetrics.vp(10),
          cross:LengthMetrics.vp(10)}}) {
            ForEach("!!!!!!!!!!!".split(''), (item: string) => {
              Text(item).width(80).height(80).backgroundColor('#ff35c5e9')
            })
          }
        }.width('100%').height(300)
      }
    }
    else{
      Row(){
        List({space:10}){
          ForEach("0123456789!!!!!!!!!!".split(''),(item:string)=>{
            ListItem(){
              if(item=='!')
                Text(item).width(50).height(50).backgroundColor('#ff35c5e9')
              else
                Text(item).width(50).height(50).backgroundColor(Color.Pink)
            }
          })
        }.scrollBar(BarState.Off)
        .listDirection(Axis.Horizontal)
      }.height(50)
    }

  }
  build() {
    Scroll(){
      Column({space:10}){
        Text().height(100).backgroundColor('#ffb30f0f').width('100%')
        this.topTab()
        List({space:10,scroller:this.scroller}){
          ForEach('1234565657565656567'.split(''),(item:string)=>{
            ListItem(){
              Text(item).height(200).width('100%').backgroundColor('#ff6bd73c')
            }
          })
        }.height(this.shift?'calc(100% - 60vp)':'calc(100% - 310vp)').width('80%')
        .nestedScroll({
          scrollForward:NestedScrollMode.PARENT_FIRST,
          scrollBackward:NestedScrollMode.SELF_FIRST
        })
        .onDidScroll(()=>{
          const yoffset=this.scroller.currentOffset().yOffset
          if(yoffset>5)this.shift=true;
          else this.shift=false;
          console.log(yoffset+'')
        })
        .scrollBar(BarState.Off)
      }
    }.scrollBar(BarState.Off)

  }
}

这个写的还是很烂的，没有模块化，只是单纯实现普通效果

2025-12-12 215854

nestedScroll(value: NestedScrollOptions)

设置前后两个方向的嵌套滚动模式，实现与父组件的滚动联动。

参数名	类型	必填	说明
value	NestedScrollOptions	是	嵌套滚动选项。默认值：

NestedScrollOptions

名称	类型	只读	可选	说明
scrollForward	NestedScrollMode	否	否	滚动组件往末尾端滚动时的嵌套滚动选项。
scrollBackward	NestedScrollMode	否	否	滚动组件往起始端滚动时的嵌套滚动选项。

NestedScrollMode

名称	值	说明
SELF_ONLY	0	只自身滚动，不与父组件联动。
SELF_FIRST	1	自身先滚动，自身滚动到边缘以后父组件滚动。父组件滚动到边缘以后，如果父组件有边缘效果，则父组件触发边缘效果，否则子组件触发边缘效果。
PARENT_FIRST	2	父组件先滚动，父组件滚动到边缘以后自身滚动。自身滚动到边缘后，如果有边缘效果，会触发自身的边缘效果，否则触发父组件的边缘效果。
PARALLEL	3	自身和父组件同时滚动，自身和父组件都到达边缘以后，如果自身有边缘效果，则自身触发边缘效果，否则父组件触发边缘效果。