HarmonyOS tabs和grid实现滑动

音乐推荐模块，grid四行可以向右滑动，并且可以和tabbar联动。

HarmonyOS

aquaa

2024-12-24 17:14:20

浏览

回答 1

待解决

回答 1

按赞同

按时间

Heiang

tab+grid不是很容易能实现效果，推荐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)
      })
    }
  }
}