#鸿蒙通关秘籍#tab页切换时,如何定位

课程介绍】tab和【课程目录】tab的tabcontent是在一个页面中,

课程介绍】的tabcontent是【开发二部】和【课程介绍】,也就是下图的1和2

【课程目录】的tabcontent是【课程目录】list,也就是下图的3

我现在想要的效果是点击【课程目录】tab时,scroll能滚动到【课程目录】tab对应的内容也就是【课程目录11】位置处。这个如何实现?

#鸿蒙通关秘籍#tab页切换时,如何定位-鸿蒙开发者社区image.png

harmonyos
2024-11-25 14:45:33
浏览
收藏 0
回答 1
已解决
回答 1
按赞同
/
按时间
忙忙忙困困困
1

刚看到这个问题的时候,我也在努力想怎么将tab和scroll结合呢,但是后来我放弃了这个想法。

我现在的想法是,将tab的“课程介绍”和“课程目录”用层叠样式stack和Butto固定在头部,当点击Button“课程设计”以后用scrollTo自动跳转到页面指定位置,当然这需要你通过计算具体值,因为页面所有组件大小已知,这个还是很好算的。接下来是我写的一个demo,希望可以给你提供思路。

@Entry
@Component
struct Index {  
scroller: Scroller = new Scroller()  
@State flag:number=0 
build() {   
Stack({ alignContent: Alignment.Bottom}) {      
     Stack({ alignContent: Alignment.Top }) {      
       //头部       
       Row({ space: 10 })
       {          
       Button('课程介绍')          
       .backgroundColor(Color.Transparent)//使组件颜色透明            
       .onClick(()=>{              
       this.flag=1              
       this.scroller.scrollTo({ xOffset: 0, yOffset: 76})           
       })//点击以后自动跳转到指定位置            
       .layoutWeight(1)//自适应伸缩           
       .fontColor(this.flag!=1?Color.Black:Color.Blue)//点击变色         
       Button('课程目录')            
       .fontColor(this.flag!=2?Color.Black:Color.Blue)            
       .backgroundColor(Color.Transparent)           
       .onClick(()=>{             
       this.flag=2              
       this.scroller.scrollTo({ xOffset: 0, yOffset: 150})           
       })            
       .layoutWeight(1)       
       }        
       .backgroundColor(Color.White)       
       .width('100%')        
       .height(60)        
       .padding({left:10,right:10})        
       .zIndex(666)//层级设置更高
        Scroll(this.scroller) {         
        Column({ space: 10 }) {           
        Text('开发二部')             
        .fontSize(30)           
        Text('测试内容')           
        Text('课程介绍')             
        .fontSize(30)            
        Text('测试内容')            
        Text('课程目录')             
        .fontSize(30)            
        ForEach(Array.from({ length: 10 }), (item: string, index) => {             
        Text('课程目录' + (index + 1))                
        .width('100%')               
        .height(100)               
        .textAlign(TextAlign.Center)               
        .backgroundColor(Color.Orange)              
        .fontSize(20)                
        .borderRadius(10)           
        })         
        }          
        .width('100%')         
        .padding({top:60,bottom:60})        
        }        
        .width('100%')       
        .height('100%')       
        .scrollable(ScrollDirection.Vertical) //设置滚动方向(默认纵向)        
        .scrollBar(BarState.On) //滚动条是否显示(On 显示,Off 不显示,Auto静止时不显示,滚动时显示)        
        .scrollBarColor(Color.Blue) //滚动条颜色       
        .scrollBarWidth(5) //滚动条宽度       
        .edgeEffect(EdgeEffect.Spring)      }     
        .width('100%')     
        .height('100%')
    } 
    }
    }
  • 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.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.


已于2024-11-25 21:13:54修改
分享
微博
QQ
微信
回复
2024-11-25 21:10:44
相关问题
HarmonyOS tab切换demo
642浏览 • 1回复 待解决