HarmonyOS tabs和grid实现滑动

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

HarmonyOS
2024-12-24 17:14:20
浏览
收藏 0
回答 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)
      })
    }
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
分享
微博
QQ
微信
回复
2024-12-24 19:15:43
相关问题
HarmonyOS Tabs横向Scroll滑动冲突
830浏览 • 1回复 待解决
HarmonyOS Grid横向滑动
1185浏览 • 1回复 待解决
HarmonyOS Tabs嵌套Grid问题
751浏览 • 1回复 待解决
HarmonyOS TabsWeb嵌套左右滑动问题
909浏览 • 1回复 待解决
HarmonyOS Tabs组件嵌套滑动
1168浏览 • 1回复 待解决
Tabs组件嵌套滑动组件
2425浏览 • 1回复 待解决
怎么实现键盘滑动联动?
332浏览 • 0回复 待解决
tabs组件 左右滑动延迟较高
1557浏览 • 1回复 待解决
Tabs滑动距离的问题有哪些?
1335浏览 • 1回复 待解决
HarmonyOS Grid半模态问题
937浏览 • 1回复 待解决