Scroll容器组件

注意：实现滚动，Scroll子容器必须大于Scroll容器

基本用法：

Scroll(){
  // 只支持一个子组件
  Column(){
    // 内容放在内部
    // 尺寸超过 Scroll 即可滚动
  }
}
.属性
.width('100%')
.height(200)

属性

Scroll控制器

用法：

1：scrollEdge：滚动到边缘

2：currentOffset：获取当前偏移量

this.scroller.currentOffset().xOffset // x 轴滚动距离 this.scroller.currentOffset().yOffset // y 轴滚动距离

步骤

1：new一个控制器

2：绑定给Scroll

3：注册点击事件，调用Scroll方法

试一试

@Entry
@Component
struct ScrollDemo {
  scroller: Scroller = new Scroller()

  build() {
    Column() {
      Scroll(this.scroller) {
        // 内容略
      }
      Row() {
        Button('返回顶部')
          .onClick(() => {
            // 滚到顶部
            this.scroller.scrollEdge(Edge.Top)
          })

        Button('获取滚动距离')
          .onClick(() => {
            const x = this.scroller.currentOffset().xOffset  //单位vp
            const y = this.scroller.currentOffset().yOffset
            AlertDialog.show({
              message:`x:${x},y:${y}`
            })
          })
      }
    }
  }
}

滚动时触发的方法（onWillScroll）

基本用法

Scroll(){
  // 内容略
}
  .onWillScroll(()=>{
    // 滚动时 一直触发
    // 可以结合 scroller的currentOffset方法 获取滚动距离
  })

综合

@Entry
@Component
struct Index {
  @State isShow:boolean=false
  scroll=new Scroller()
  build() {
  Column(){
    Stack({ alignContent: Alignment.BottomEnd }){
      Scroll(this.scroll){
        Column(){
          Image($r('app.media.ic_jd_scroll_01'))
          Image($r('app.media.ic_jd_scroll_02'))
          Image($r('app.media.ic_jd_scroll_03'))
        }
      }
      .onWillScroll(()=>{
        let offesty=this.scroll.currentOffset().yOffset    //监测偏移量
        if (offesty>=400) {   //偏移量大于400
          this.isShow=true        //大于400则动态变量为true控制显示隐藏
        }else
          this.isShow=false
      })
      .width('100%')
      .height(720)
      .backgroundColor(Color.White)
      Image($r('app.media.ic_jd_tab'))
        .width('100%')
      if (this.isShow){
        Image($r('app.media.ic_jd_rocket'))
          .onClick(()=>{
            this.scroll.scrollEdge(Edge.Top)    //图片显示出来点击回到顶部
          })
          .width(30)
          .height(30)
          .backgroundColor(Color.White)
          .borderRadius(15)
          .position({x:310,y:620})
          .padding(6)
      }

    }
  }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.Orange)
  }
}