HarmonyOS Scroll嵌套list,scrollToItemInGroup不执行

HarmonyOS  Scroll嵌套list,scrollToItemInGroup不执行。

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

scroll嵌套list的时候,scroll在不设置高度的情况下默认无限大,由于list组件无法无限大,因此会自适应list子组件高度,导致list组件的可视高度和内容高度一样大,所以list组件无法滚动,scrollToItemInGroup也无法执行。可以给下方的list设置一个高度来解决这个问题。

1、可视高度是指组件可视高度,不是屏幕可视高度,滚动组件可视高度和内容高度一致就无法滚动。

2、若不想设置list高度,可以在通过onAreaChange()获取到list组件到顶部的距离和getItemRectInGroup()方法获取到需要跳转信息,最后通过scrollTo()方法跳转到对应的位置。以下是参考demo。

@Entry  
@Component  
struct SpecialColumnPage {  
  private listScroller: ListScroller = new ListScroller()  
  private scrollerForScroll: Scroller = new Scroller()  
  private category_list: Array<number> = [111,222,333,444,555]  
  private news_list: Array<string> = ['sub111','sub222','sub333','sub444','sub555']  
  private heightToTip:number = 0;  
  build() {  
    Stack(){  
      Scroll(this.scrollerForScroll) {  
        Column() {  
          List({ space: 10, initialIndex: 0 }) {  
            ForEach(this.category_list, (item: number,index) => {  
              ListItem() {  
                Text(item.toString())  
                  .height(30)  
                  .width(100)  
                  .fontSize(16)  
                  .textAlign(TextAlign.Center)  
                  .onClick(()=>{  
                    let jieguo = this.listScroller.getItemRectInGroup(index,1)  
                    this.scrollerForScroll.scrollTo({ xOffset: jieguo.x, yOffset: jieguo.y + this.heightToTip })  
                  })  
              }  
            }, (item: number, index?: number) => JSON.stringify(item) + index)  
          }  
  
          List({ space: 0, initialIndex: 0 ,scroller: this.listScroller}) {  
            ForEach(this.category_list, (item:number) => {  
              ListItemGroup({ header: this.itemHead(item) }) {  
                ForEach(this.news_list, (project: string) => {  
                  ListItem() {  
                    Text(item.toString())  
                      .height(30)  
                      .width(100)  
                      .fontSize(16)  
                      .textAlign(TextAlign.Center)  
                  }  
                  .height(130)  
                }, (project: String, subindex?: number) => JSON.stringify(project) + subindex)  
              }  
            }, (item: number, index?: number) => JSON.stringify(item) + index)  
          }  
          .listDirection(Axis.Vertical) // 排列方向  
          .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线  
          .edgeEffect(EdgeEffect.None) // 滑动到边缘无效果  
          .chainAnimation(false) // 联动特效关闭  
          .onAreaChange((oldValue: Area, newValue: Area) =>{  
            this.heightToTip =Number(newValue.position.y);  
          })  
        }  
        .margin({top:80})  
        .alignItems(HorizontalAlign.Start)  
        .width('100%')  
      }  
    }  
    .align(Alignment.TopStart)  
  }  
  
  @Builder  
  itemHead(index: number) {  
    Row(){  
      Circle()  
        .width(6)  
        .height(6)  
        .fillOpacity(0)  
        .strokeWidth(2)  
        .stroke('#77BA46')  
      Text(index.toString())  
        .fontSize(16)  
        .fontColor('#333333')  
        .fontWeight(FontWeight.Bold)  
        .margin({left:5})  
    }  
    .margin({left:15,top:20,bottom:20})  
    .width("100%")  
  }  
}
分享
微博
QQ
微信
回复
2024-09-25 16:45:28
相关问题
HarmonyOS scroll嵌套List不能整体滑动
228浏览 • 1回复 待解决
嵌套组件中Scroll生效
2021浏览 • 1回复 待解决
scrolllist嵌套滑动
1288浏览 • 1回复 待解决
refresh + scroll+list嵌套问题
240浏览 • 1回复 待解决
HarmonyOS Scroll 嵌套 RelativeContainer 问题
328浏览 • 1回复 待解决
HarmonyOS Scroll嵌套RelativeContainer 问题
197浏览 • 1回复 待解决
HarmonyOS scrolllist滚动冲突
232浏览 • 1回复 待解决
Scroll与WaterFlow滑动嵌套
879浏览 • 1回复 待解决
HarmonyOS list 嵌套web滑动切换问题
341浏览 • 1回复 待解决
HarmonyOS List嵌套waterflow滑动卡顿
180浏览 • 1回复 待解决
HarmonyOS List嵌套不能同步数据
216浏览 • 1回复 待解决
HarmonyOS Web组件和List嵌套使用问题
110浏览 • 1回复 待解决
Web和List嵌套手势冲突问题
884浏览 • 1回复 待解决
如何实现scrolllist单边回弹效果
366浏览 • 1回复 待解决