鸿蒙学习-Scroll、Tabs鸿蒙学习-Scroll、Tabs 一、Scroll Scroll容器的基本使用 1.1、

鸿蒙学习-Scroll、Tabs

一、Scroll

Scroll容器的基本使用

1.1、scroll容器的作用

作用：当scroll容器内的子组件尺寸超出自身尺寸的时候就会出现滚动效果

语法：Scroll（）{}

用法：给Scroll组件设置尺寸，在Scroll组件里面设置子组件（注：Scroll容器里面只能有一个子组件），给这个子组件设置相应的高宽，根据需求效果定高宽，如果需要水平滚动那么我的子组件的宽就要超出Scroll组件的宽，反之垂直滚动。

代码演示：

@Entry
@Component
struct zy {
  build() {
    Scroll(){
      Column(){

      }
      .width('超出Scroll组件的宽就是水平滚动')
      .height('超出Scroll组件的高就是垂直滚动')
    }
    .width('100%')
    .height('100%')
  }
}

常见的应用场景：页面内容超出屏幕的宽度或者高度需要滚动展示的时候以及页面由多个组件组成并需要滚动的时候。

1.2、scroll控制器

作用：日常开发中可能需要通过代码控制滚动，以及获取滚动的距离，就可以通过 Scroll 的控制器来实现。

控制滚动

流程：

实例化 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}`
            })
          })
      }
    }
  }
}

onWillScroll事件

作用：滚动事件回调, 返回滚动时水平、竖直方向偏移量。

代码演示：

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

二、Tabs

2.1、Tabs的基本使用

作用：

当页面内容较多时，可以通过Tabs组件进行分类展示。

基本用法：

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

常用属性

// BarPosition.Start 起始

// BarPosition.End 结尾

Tabs({ barPosition: BarPosition.End }) { // 内容略 }

.vertical(true)// 垂直导航 true / 水平false

.scrollable(true) // 允许滑动 true / 不允许 false

.animationDuration(0) // 切换动画的时间，毫秒

2.2、滚动导航栏

作用：如果导航栏的内容较多，屏幕无法容纳时，可以将他设置为滚动

语法： Tabs(){ // 内容略 }

.barMode(BarMode.Scrollable)// 滚动

// .barMode(BarMode.Fixed)// 默认值

代码演示：

@Entry
@Component
struct intex2 {
titles: string [] = ['首页', '关注', '热门', '军事', '体育', '八卦', '数码', '财经', '美食', '旅行']

build() {
  Column() {
    Tabs() {
      ForEach(this.titles, (text: string) => {
        TabContent() {
          Text(text)
        }
        .tabBar(text)
      })

    }
    .barMode(BarMode.Scrollable)//滚动
    .animationDuration(0)//设置动画时间
    .vertical(false)//调整导航为水平或垂直垂直导航 true/水平false
    .scrollable(true) // 允许滑动 true / 不允许 false
  }
  .width('100%')
  .height('100%')
}
}

效果图：

动画.gif

2.3、自定义TabBar

作用：TabBar 如果放在底部的话，一般会显示图形和文字， 甚至有特殊的图标， 如果要实现此类效果，就需要 自定义tabBar

代码演示：

@Entry
@Component
struct i {
  @State num:number = 0
  @Builder
  columnBuilder(tp: string,tp1:string, text: string, index: number) {

    if (index == 2) {
      Badge({
        value: text,
        position: { x: 24, y: -4 },
        style: {}
      }) {
        Image($r(tp))
          .width(30)
      }
    } else {
      Column() {
        if (index == 3) {
          Badge({
            value: '7',
            position: { x: 24, y: -4 },
            style: {}
          }) {
            Image(this.num==index?$r(tp1):$r(tp))
              .width(30)
          }
        } else {
          Image(this.num==index?$r(tp1):$r(tp))
            .width(30)
        }

        Text(text)
          .fontColor(this.num==index?Color.Red:Color.Black)
      }

    }
  }

  build() {
    Column() {
      Tabs() {
        TabContent() {

        }
        .tabBar(this.columnBuilder('app.media.ic_tabbar_icon_0','app.media.ic_tabbar_icon_0_selected', '首页', 0))

        TabContent() {
        }
        .tabBar(this.columnBuilder('app.media.ic_tabbar_icon_1','app.media.ic_tabbar_icon_1_selected', '逛', 1))

        TabContent() {

        }
        .tabBar(this.columnBuilder('app.media.icon','', '上新', 2))

        TabContent() {
        }
        .tabBar(this.columnBuilder('app.media.ic_tabbar_icon_2','app.media.ic_tabbar_icon_2_selected', '购物车', 3))

        TabContent() {
        }
        .tabBar(this.columnBuilder('app.media.ic_tabbar_icon_3','app.media.ic_tabbar_icon_3_selected', '我的', 4))

      }
      .onChange((index)=>{
        this.num=index
      })
      .barPosition(BarPosition.End)
    }
    .width('100%')
    .height('100%')
  }
}

TabBar组件的事件

鸿蒙学习-Scroll、Tabs