07-Scroll容器与Tabs组件

一.滚动容器Scroll

简介:当子组件的布局尺寸超出Scroll的尺寸时,内容可以滚动

1.Scroll-核心用法

1)用法说明:

①Scroll设置尺寸

②设置溢出的子组件(只支持一个子组件)

③滚动方向(支持横向和纵向,默认纵向)

2)代码示意:

  build() {
    Scroll(){
      //只支持一个子组件
      Column(){
        //内容放在内部
        //尺寸超过Scroll即可滚动
      }
    }
    .width('100%')
    .height(200)
    .scrollable(ScrollDirection.xxx)//设置滚动方向
  }
//.scrollable(ScrollDirection.Vertical) 纵向
//.scrollable(ScrollDirection.Horizontal)横向

2.Scroll-常见属性

1)常用参数:

名称参数类型描述
scrollBarBarState设置滚动条状态
scrollBarColorstring|number|Color设置滚动条颜色
scrollBarWidthstring|number设置滚动条宽度
edgeEffectvalue:EdgeEffect设置边缘滑动效果EdgeEffect.None 无EdgeEffect.Spring 弹簧EdgeEffect.Fade 阴影
scrollableScrollDirection设置滚动方向ScrollDirection.Vertical) 纵向ScrollDirection.Horizontal)横向

2)代码示意:

  build() {
    Column() {
      Scroll() {
        Column() {
          ForEach(Array.from({ length: 10 }), (item: string, index) => {
            Text('测试文本')
              .width('100%')
              .height(100)
              .backgroundColor(Color.Grey)
              .margin(20)
          })
        }
        .padding(10)
        .width('100%')
      }
      .width('100%')
      .height(400)
      .scrollable(ScrollDirection.Vertical) //设置滚动方向
      .scrollBar(BarState.On)  //On令滚动条恒存在 Off恒隐藏 Auto滑动显示
      .scrollBarColor(Color.Blue)  //滚动条颜色
      .scrollBarWidth(5)  //滚动条宽度
      .edgeEffect(EdgeEffect.Spring)  //滚动条弹簧效果
    }
  }

3.Scroll-控制器

1)核心步骤:

①实例化Scroll的控制器

②绑定给Scroll组件

③控制器的方法控制滚动,控制其属性获取滚动距离

2)代码示意:

struct Index {
  //1.创建Scroller对象(实例化)
  myscroller:Scroller = new Scroller()
  build() {
    Column({ space: 10 }) {
      Scroll(this.myscroller) {
        Column() {
          ForEach(Array.from({ length: 10 }), (irem: string, index) => {
            Text('测试文本')
              .width('100%')
              .height(100)
              .backgroundColor(Color.Grey)
              .margin(20)
          })
        }
        .padding(10)
        .width('100%')
      }
      .width('100%')
      .height(400)
      .scrollable(ScrollDirection.Vertical) //设置滚动方向
      .scrollBar(BarState.On)  //On令滚动条恒存在 Off恒隐藏 Auto滑动显示
      .scrollBarColor(Color.Blue)  //滚动条颜色
      .scrollBarWidth(5)  //滚动条宽度
      .edgeEffect(EdgeEffect.Spring)  //滚动条弹簧效果


      Button('控制滚动条位置')
        .margin(20)
        .onClick(()=>{
          this.myscroller.scrollEdge(Edge.Top) //控制滚动条到顶部
        })
      Button('获取已经滚动的距离')
        .onClick(()=>{
          const y = this.myscroller.currentOffset().yOffset
          AlertDialog.show({
            message:`'y':${y}`
          })
        })
    }
  }
}

4.Scroll-事件

简介:Scroll组件提供了一些事件,让开发者可以在适当的时候添加逻辑。

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

1)代码示意:

Scroll(this.myscroller) {
        Column() {
          ForEach(Array.from({ length: 10 }), (irem: string, index) => {
            Text('测试文本')
              .width('100%')
              .height(100)
              .backgroundColor(Color.Grey)
              .margin(20)
          })
        }
        .padding(10)
        .width('100%')
      }
      .width('100%')
      .height(400)
      .scrollable(ScrollDirection.Vertical) //设置滚动方向
      .scrollBar(BarState.On)  //On令滚动条恒存在 Off恒隐藏 Auto滑动显示
      .scrollBarColor(Color.Blue)  //滚动条颜色
      .scrollBarWidth(5)  //滚动条宽度
      .edgeEffect(EdgeEffect.Spring)  //滚动条弹簧效果
      .onScroll((x,y)=>{
        console.log('已经滑动的距离:',this.myscroller.currentOffset().yOffset)
      })

5.Scroll-京东案例

1)代码示意:

@Entry
@Component
struct Index {
  //1.创建Scroll实例对象
  myscroller:Scroller = new Scroller()
  @State yOffset:number = 0 //实时保存y轴距离
  build() {
    Column() {
      Stack({ alignContent: Alignment.BottomEnd }) {
        // 顶部滚动区域
        //2.和scroller容器绑定
        Scroll(this.myscroller) {
          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'))
          }
        }
        .scrollBar(BarState.Off)
        .width('100%')
        .backgroundColor(Color.Orange)
        .onScroll(()=>{
          this.yOffset=this.myscroller.currentOffset().yOffset
        })


        //有时显示有时隐藏可以用条件渲染
        if(this.yOffset>400)
        Image($r('app.media.ic_jd_rocket'))
          .width(40)
          .backgroundColor(Color.White)
          .borderRadius(20)
          .padding(5)// .margin({right:20,bottom:20})
          .offset({ x: -20, y: -20 })
          .onClick(()=>{
            this.myscroller.scrollEdge(Edge.Top)})
      }
      .layoutWeight(1)


      // 底部 tabbar 图片(后面会学)
      Image($r('app.media.ic_jd_tab'))
        .width('100%')
    }
  }
}

二.Tabs组件

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

Tab里面还可以有Tab

1.Tabs-基本使用

1)基本用法:

    Tabs(){


      TabContent(){
        Text('首页内容') //有且只能有一个子组件,如果内容比较复杂,可以用Column这种
      }
      .tabBar('首页')  //配置导航


      TabContent(){
        Text('推荐内容') //有且只能有一个子组件,如果内容比较复杂,可以用Column这种
      }
      .tabBar('推荐')  //配置导航


      TabContent(){
        Text('发现内容') //有且只能有一个子组件,如果内容比较复杂,可以用Column这种
      }
      .tabBar('发现')  //配置导航


      TabContent(){
        Text('我的') //有且只能有一个子组件,如果内容比较复杂,可以用Column这种
      }
      .tabBar('我的')  //配置导航


    }

2)常用属性

名称作用
barPosition调整位置 开头 或 结尾 参数
vertical调整导航 水平 或 垂直
scrollable调整是否手势滑动 切换
animationDuration点击滑动动画时间

①写法位置

3)滚动导航栏

如果导航栏的内容较多,屏幕无法容纳时,可以将它设置为滚动

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

①代码示意:

  tieles:string[]=[
    '首页','关注','热门','军事','体育',
    '八卦','数码','财经','美食','旅行',
  ]
    //生成十个面板+十个小导航
    Tabs(){
      ForEach(this.tieles,(item:string,index)=>{
        TabContent(){
          Text('我是内容')
        }
        .tabBar(`${item}内容`)
      })
    }
    .barMode(BarMode.Scrollable)

2.Tabs-自定义TabBar-基础结构

TabBar在底部,一般会显示图形和文字,甚至有一些特殊logo

1)代码示意:

@Entry
@Component
struct Index {
  @Builder
  myBuilder(title:string,img:ResourceStr){
    Column(){
      Image(img)
        .width(30)
      Text(title)
    }
  }
  build() {
    Tabs({barPosition:BarPosition.End}){


      TabContent(){
        Text('购物车内容')
      }
      .tabBar(this.myBuilder('购物车',$r('app.media.ic_tabbar_icon_2')))


      TabContent(){
        Text('我的内容')
      }
      .tabBar(this.myBuilder('我的',$r('app.media.ic_tabbar_icon_3')))
    }
  }
}

3.Tabs-自定义TabBar-高亮切换

1)核心思路:

①监听切换事件→得到索引值,记录高亮的索引

②给每个tabber起一个标记,0,1,2

③在taber内部比较标记==记录的索引?高亮:不高亮

名称功能描述
onChange(event:(index:number)=>void)Tab页签切换后触发的事件。-index:当前显示的index索引,索引从0开始计算。滑动切换、点击切换 均会触发
onTabbarClick(event:(index:number)=>void)10+Tab页签点击后触发的事件。-index:被点击的index索引,索引从0开始计算。

2)代码示意:

@Entry
@Component
struct Index {
  //准备状态,存储激活的索引
  @State selectIndex:number=0


  @Builder
  myBuilder(itemIndex:number,title:string,img:ResourceStr,selImg:ResourceStr){
    //如果激活的是自己,图文/文本,都需要调整样式->需要区分不同的 tabar
    Column(){
      Image(
        itemIndex==this.selectIndex?selImg:img
      )
        .width(30)
      Text(title)
        .fontColor(itemIndex==this.selectIndex?Color.Red:Color.Black)
    }
  }
  build() {
    Tabs({barPosition:BarPosition.End}){


      TabContent(){
        Text('购物车内容')
      }
      .tabBar(this.myBuilder(0,'购物车',$r('app.media.ic_tabbar_icon_2'),$r('app.media.ic_tabbar_icon_2_selected')))


      TabContent(){
        Text('我的内容')
      }
      .tabBar(this.myBuilder(1,'我的',$r('app.media.ic_tabbar_icon_3'),$r('app.media.ic_tabbar_icon_3_selected')))
    }
    .onChange((index:number)=>{
      /*console.log('激活的索引',index)*/
      this.selectIndex = index
    })
  }


}

如果您觉得文章对您有帮助,可以支持下博主,网络一线牵,一分也是缘。
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇