【鸿蒙学习笔记】ArkUI・使用动画・组件动画・容器组件・Scroll组件・・

官方文档：
打造组件定制化动效
Scroll

Scroll组件中可对各个子组件在滑动时的动画效果进行定制。

Tabs里添加Scroller

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

  build() {
    Tabs({ barPosition: BarPosition.End }) {
      TabContent() {
        Scroll(this.scroller) {
          Column() {
            Text("haha").height(30).backgroundColor(Color.Red).height(200)
            Text("haha").height(30).backgroundColor(Color.Orange).height(200)
            Text("haha").height(30).backgroundColor(Color.Red).height(200)
            Text("haha").height(30).backgroundColor(Color.Orange).height(200)
          }.width('100%').backgroundColor('#eee')
        }
        .backgroundColor('#eee') // 背景颜色
        .scrollable(ScrollDirection.Vertical) // 滚动方向纵向
        .scrollBar(BarState.Off) // 滚动条常驻显示
        .scrollBarColor(Color.Gray) // 滚动条颜色
        .scrollBarWidth(10) // 滚动条宽度
        .edgeEffect(EdgeEffect.Spring) // 边缘滑动效果:支持弹簧效果,阴影效果
        .friction(0.6) //摩擦系数
      }.tabBar('首页')

      TabContent() {
        Column().width('100%').height('100%').backgroundColor('#eee')
      }.tabBar('会员')
    }
    .barWidth('100%')
    .barHeight(60)
  }
}