Scroll和Tab的概念Scroll和Tab的概念 1.Scorll 可滚动的容器组件，当子组件的布局尺寸超过Scro

Scroll和Tab的概念

1.Scorll

可滚动的容器组件，当子组件的布局尺寸超过Scroll的尺寸时，内容可以滚动。当页面内容由多个区域组成，并且可以滚动时，推荐使用 Scroll，比如：

小米有品：页面滚动，点击顶部区域，返回顶部
京东：页面滚动，点击右下角小火箭，返回顶部

2.1.用法

Scroll 设置尺寸
2设置子组件（只支持一个子组件）
3设置滚动：
a竖向滚动：子组件的高度超出 Scroll
b横向滚动：子组件的宽度超出 Scroll，scrollable改为横向滚动
4根据需求调整属性

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

scrollable ：ScrollDirection ：设置滚动方向。

ScrollDirection.Vertical 纵向

ScrollDirection.Horizontal 横向

scrollBar ： BarState ：设置滚动条状态。

scrollBarColor ： string | number | Color ：设置滚动条的颜色。

scrollBarWidth ： string | number ：设置滚动条的宽度 edgeEffect ： value:EdgeEffect ： value:EdgeEffect

       .scrollBarColor(Color.Pink)//设置滚动条的颜色。
      .scrollBarWidth(50)
      .scrollBar(BarState.Off)
      .edgeEffect(EdgeEffect.Spring)
      .scrollable(ScrollDirection.Horizontal)

2.3.Scroll的控制器

scrollEdge：滚动到边缘
currentOffset： 获取当前的偏移量

核心步骤：

实例化 Scroller的控制器
绑定给 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
            const y = this.scroller.currentOffset().yOffset
            AlertDialog.show({
              message:`x:${x},y:${y}`
            })
          })
      }
    }
  }
} @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
            const y = this.scroller.currentOffset().yOffset
            AlertDialog.show({
              message:`x:${x},y:${y}`
            })
          })
      }
    }
  }
}
`

### 2.4.onScroll事件
滚动事件回调函数，滚动事件回调, 返回滚动时水平、竖直方向偏移量。
       

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

3.Tabs容器

3.1.Tabs容器的基本用法

完成一些底部导航栏的内容比较常见，B站、抖音等，通常显示在下方，并且嵌套关系的使用也是比较常见的。

 Tabs() { // 顶级容器
      TabContent() {
        // 内容区域：只能有一个子组件
      }
      .tabBar('首页') // 导航栏

3.2.常用属性

vertical 属性即可调整导航为水平或垂直
barPosition 即可调整导航位置为开头或结尾
scrollable 即可调整是否允许滑动切换
animationDuration 设置动画时间毫秒

3.3 滚动导航栏

有很多的导航内容时使用，比如近两年的抖音上的内容导航。

可以通过 Tabs 组件的 barMode 属性即可调整固定导航栏或滚动导航栏

Tabs(){
  // 内容
}
  .barMode(BarMode.Scrollable)// 滚动

3.4.自定义taBar

通常情况下每个软件都会自己的UI系统，比如B站，导航区域是自己设计的，我们如果下实现就要利用tabBar自定义功能

为了方便我们需要定义一个自定义构建函数，实现点击之后的一个效果我们要利用if函数还有索引，如果有角标我们就要利用Badge组件大多数应用的还是比较广泛的。剩下的在tabBar就调用函数即可。

用状态变量保存，onChange,ontabBarClick中获取到的索引值
给每个 tabBar起个标记，0，1，2.。。
在tabBar内部比较标记==this.index?高亮:不高亮 .onChange((index) => { console.log('onChange-index:', index)

 @Builder
  tabBarBuilder(img: ResourceStr, text: string, index: number, selectedImg: ResourceStr) {

    Column() {
      Image(this.selectedIndex == index ? selectedImg : img)
        .width(30)
      Text(text)
        .fontColor(this.selectedIndex == index ? '#eebf7e' : Color.Black)
    }
  }
  
   Tabs() {
        TabContent() {
          Text('首页')
        }
        .tabBar(this.tabBarBuilder($r('app.media.ic_tabbar_icon_0'), '首页', 0, $r('app.media.ic_tabbar_icon_0_selected')))