一、Scroll

1. Scroll容器组件

1.1 Scroll作用

Scroll容器组件在其内部子元素超出自己高或者宽时出现滚动效果

1.2 语法+属性

Scroll(){
  // 只支持一个子组件
  Column(){
    // 内容放在内部
    // 尺寸超过 Scroll 即可滚动
  }
}
.width('100%')
.height(200)
.scrollBarColor(Color.Pink)//设置滚动条颜色
.scrollBarWidth(50)//设置滚动条宽度
.scrollBar(BarState.Off)//设置滚动条状态，off:隐藏,on:常驻,auto:(默认)
.edgeEffect(EdgeEffect.Spring)//设置边缘滑动效果，spring:弹簧效果,fade:阴影效果
.scrollable(ScrollDirection.Horizontal)//设置滚动方向，Vertical:纵向(默认),Horizontal:横向

2. Scroll控制器+onWillScroll/onScroll

2.1 Scroll控制器作用

Scroller控制与Scroll组件进行绑定后，可以通过控制器上的方法来控制Scroll的滚动行为和获取滚动的偏移量

2.2 使用步骤

@Entry
@Component
struct ScrollDemo {
//✨✨1.实例化一个scroller
  scroller: Scroller = new Scroller()

  build() {
    Column() {
    //✨✨2.绑定到Scroll组件上
      Scroll(this.scroller) {
        // 内容略
      }
      //✨5.结合onWillScroll/onScroll使用，
       .onScroll((xOffset,yOffset)=>{
          // 滚动时 一直触发
          // 可以结合 scroller的currentOffset方法 获取滚动距离
          this.scroller.currentOffset().yOffset
        })
        
      Row() {
        Button('返回顶部')
          .onClick(() => {
            //✨✨3.调用scroller控制器上的scrollEdge
            this.scroller.scrollEdge(Edge.Top)//Top:顶部;Start:开头;Bottom:底部;End:结尾
          })

        Button('获取滚动距离')
          .onClick(() => {
          //✨✨4.获取偏移量
            const x = this.scroller.currentOffset().xOffset//横向滚动获取x偏移量
            const y = this.scroller.currentOffset().yOffset//纵向滚动获取y偏移量
            AlertDialog.show({
              message:`x:${x},y:${y}`
            })
          })
      }
    }
  }
}

二、Tabs

1. 作用

可以实现App底部导航和顶部导航的功能

2. 基本用法+属性

@Entry
@Component
struct TabbarDemo {
  build() {
  //✨1.基本用法
    Tabs() { // 顶级容器
      TabContent() {
        // 内容区域：只能有一个子组件
      }
      .tabBar('首页') // 导航栏
    }
    //✨2.属性
    .vertical(true)//调整导航栏水平或垂直，true:垂直,false:水平(默认)
    .barPosition(BarPosition.End)//控制tabBar显示位置，End:底部;Start:顶部(默认)
    .scrollable(false)//设置页面左右滑动，true:可以左右滑动(默认);false:关闭左右滑动
    .animationDuration(0)//设置tabBar动画效果
    .barMode(BarMode.Scrollable)//设置tabBar的滚动效果，Scrollable:可以滚动，Fixed:不可以滚动(默认)
  }
}

3. 自定义tabBar

@Entry
@Component
struct Index {
//💕💕3.1 用状态变量保存，onChange,ontabBarClick中获取到的索引值
  @State currentindex:number = 0
  //✨✨1.1 自定义tabBar外观
  @Builder
  tabBuilder(image:string,simage:string,text:string,index:number){
    Column({space:4}){
    //💕💕3.3 在自定义构建函数中使用三元表达式来进行高亮功能的处理
      Image(this.currentindex == index?$r(simage):$r(image))
        .width(30)
      Text(text)
        .fontColor(this.currentindex == index?Color.Red:Color.Black)
    }
  }
  build() {
    Column(){
      Tabs() {
        TabContent() {
          Text('首页')
            .fontSize(40)
        } 
 //✨✨1.2 使用自定义构建函数
 //💕💕3.2 在调用自定义构建函数的时候，需要传入当前tabbar的索引(固定值)，同时要传入点亮的图片路径和正常的图片路径
 .tabBar(this.tabBuilder('app.media.ic_tabbar_icon_0','app.media.ic_tabbar_icon_0_selected','首页', 0))

        TabContent() {
          Text('逛')
            .fontSize(40)
        }
        .tabBar(this.tabBuilder('app.media.ic_tabbar_icon_1','app.media.ic_tabbar_icon_1_selected','逛', 1))

        TabContent() {
          Text('购物车')
            .fontSize(40)
        }
        .tabBar(this.tabBuilder('app.media.ic_tabbar_icon_2','app.media.ic_tabbar_icon_2_selected','购物车', 2))

        TabContent() {
          Text('我的')
            .fontSize(40)
        }
        .tabBar(this.tabBuilder('app.media.ic_tabbar_icon_3','app.media.ic_tabbar_icon_3_selected','我的', 3))
      }
      .barPosition(BarPosition.End)
      //❤️❤️2. Tabs组件事件onChange(滑动/点击)/onTabBarClick(点击)
      .onTabBarClick((index)=>{
        this.currentindex = index
      })

    }
    .width('100%')
    .height('100%')
  }
}