HarmonyOS 项目要做一个页面,页面中有多级tab的切换展示;如何做布局?

项目要做一个页面,页面中有多级tab的切换展示,此次如何做布局;同时当页面中列表滑动到头时,再次滑动需将顶部内容展示出来;反之先推出顶部内容再滑动列表中数据;请问下如何实现?


HarmonyOS
2024-10-12 11:15:14
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

可以在官网文档中了解嵌套滑动的使用,链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#nestedscroll11

参考demo如下:

@Entry  
@Component  
struct Index {  
  list: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]  
  build() {  
      Scroll() {  
        Column(){  
        Image($r('app.media.app_icon')).width('100%').height(300).objectFit(ImageFit.Auto)  
          Tabs() {  
            TabContent() {  
              Tabs() {  
                TabContent() {  
                  List({space:10}) {  
                    ForEach(this.list, (item: number) => {  
                      ListItem(){  
                        Column() {  
                          Text(`当前是${item}`)  
                        }.width('100%').height(300).justifyContent(FlexAlign.Center).backgroundColor(Color.Gray).borderRadius(10)  
                      }  
                    })  
                  }.padding({left:10, right:10}).nestedScroll({  
                    scrollForward:NestedScrollMode.PARENT_FIRST,  
                    scrollBackward:NestedScrollMode.SELF_FIRST  
                  })  
                }.tabBar('直播目录')  
                TabContent() {  
                }.tabBar('录播目录')  
                TabContent() {  
                }.tabBar('面授课')  
              }  
            }.tabBar('目录')  
            TabContent() {  
            }.tabBar('详情')  
            TabContent() {  
            }.tabBar('资料')  
          }  
      }  
    }  
  }  
}
分享
微博
QQ
微信
回复
2024-10-12 16:55:15
相关问题
HarmonyOS 要做一个可以无限滚动list
501浏览 • 1回复 待解决
没有依赖关系HAR如何做页面跳转?
350浏览 • 1回复 待解决
如何新开一个半透明页面
270浏览 • 1回复 待解决
如果写一个多级获取数据问题?
3368浏览 • 1回复 待解决
HarmonyOS 需要一个筛选页面的demo
273浏览 • 1回复 待解决
如何实现一个页面显示子窗口
609浏览 • 1回复 待解决
websocket结合php数据实时展示页面
2694浏览 • 1回复 待解决
如何展示一个原生广告
290浏览 • 1回复 待解决
如何展示一个贴片广告
312浏览 • 1回复 待解决
如何展示一个开屏广告
416浏览 • 1回复 待解决
如何展示一个banner广告
353浏览 • 1回复 待解决
如何展示一个激励广告
296浏览 • 1回复 待解决
如何展示一个插屏广告
389浏览 • 1回复 待解决