HarmonyOS 鸿蒙Next tabs和grid实现滑动

发布于 1周前 作者 gougou168 来自 鸿蒙OS

HarmonyOS 鸿蒙Next tabs和grid实现滑动

我们的音乐推荐模块,grid四行可以向右滑动,并且可以和tabbar联动 我们的音乐有大量这种设计，tabs和grid实现滑动这个要怎么实现

Harmonyos Next教程
2 回复

可以用swiper+tab，tab只显示标题，不设置实际内容

@Entry
@Component
struct Index {
  @State selectTabIndex: number = 0
  tabController: TabsController = new TabsController()
  emojiList: Array<Array<Resource>> = [
    [$r("app.media.startIcon"), $r("app.media.startIcon"), $r("app.media.startIcon"), $r("app.media.startIcon")],
    [$r("app.media.startIcon"), $r("app.media.startIcon"), $r("app.media.startIcon"), $r("app.media.startIcon")],
    [$r("app.media.startIcon"), $r("app.media.startIcon"), $r("app.media.startIcon"), $r("app.media.startIcon")],
    [$r("app.media.startIcon"), $r("app.media.startIcon"), $r("app.media.startIcon"), $r("app.media.startIcon")],
    [$r("app.media.startIcon"), $r("app.media.startIcon"), $r("app.media.startIcon"), $r("app.media.startIcon")]
  ]
  @State scrollState: ScrollState = ScrollState.Idle
  @State isEnd: boolean = false
  swiperController:SwiperController = new SwiperController()
  build() {
Column(){
  Tabs({ barPosition: BarPosition.Start, index: this.selectTabIndex, controller: this.tabController }) {
    TabContent() {
    }.tabBar(new SubTabBarStyle('&#39318;&#39029;1')).height(0)
    TabContent() {
    }.tabBar(new SubTabBarStyle('&#39318;&#39029;2')).height(0)
  }
  .height(60)
  .barHeight(56)
  .scrollable(false)
  .onTabBarClick((index:number)=&gt;{
    this.swiperController.changeIndex(index)
  })
  Swiper(this.swiperController) {
    ForEach(this.emojiList, (item: Array&lt;Resource&gt;, index: number) =&gt; {
      Row({space:5}){
        Image(item[0]).width(50)
        Image(item[1]).width(50)
        Image(item[2]).width(50)
        Image(item[3]).width(50)
      }.width(250).backgroundColor(0x0654332*index)
    })
  }.displayCount(2).itemSpace(100).onChange((index:number)=&gt;{
    if(index&gt;1)index=1;
    this.tabController.changeIndex(index)
  })
}
  }
}

更多关于HarmonyOS 鸿蒙Next tabs和grid实现滑动的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS中实现Next tabs和grid的滑动效果，可以通过使用ArkUI框架下的组件和布局来实现。以下是简要实现思路：

  1. Tabs滑动：

    • 使用List或Swiper组件来承载多个tab页面。
    • 设置Swiper的indicator属性为dots或line来显示滑动指示器。
    • 每个tab页面可以是自定义的组件，通过List或Swiper的item属性来设置。

  2. Grid滑动：

    • 使用GridContainer组件来创建网格布局。
    • 通过设置GridContainer的columnCount和rowCount属性来定义网格的列数和行数。
    • 在GridContainer中放置多个GridItem，每个GridItem可以包含图片、文本等子组件。
    • 使用Scroll组件包裹GridContainer来实现滑动效果。

示例代码片段（伪代码）：

<Swiper>
    <List>
        <!-- Tab 1 Content -->
    </List>
    <List>
        <!-- Tab 2 Content -->
    </List>
</Swiper>

<Scroll>
    <GridContainer columnCount="3" rowCount="2">
        <GridItem>
            <!-- Grid Item Content -->
        </GridItem>
        <!-- More GridItems -->
    </GridContainer>
</Scroll>

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部