HarmonyOS list 嵌套web滑动切换问题

1. 将web组件作为一个ListItemGroup的header

2. web为了考虑性能,最大高度会设置为当前显示区域的高度

3.web和list都会有滚动,两者之间需要切换滚动,看起来像是一个整体

问题:

1.快速滑动的时候,会顿一下

2.向下快速滚动松手,web不能自动跟随惯性向下滚动

有什么方法可以改善这个效果,滑动惯性,能否做到流畅衔接

HarmonyOS
2024-09-05 09:34:03
421浏览
已于2024-9-5 09:34:35修改
收藏 0
回答 1
回答 1
按赞同
/
按时间
zbw_apple

设置renderMode和layoutmode接口

参考链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5

参考demo:

import { webview } from '@kit.ArkWeb'; 
 
@Entry 
@Component 
struct Demo4Page { 
  private scrollerForScroll: Scroller = new Scroller(); 
  controller: webview.WebviewController = new webview.WebviewController; 
  @State ScrollDirection: ScrollDirection = ScrollDirection.Vertical; 
  title = '2023落下帷幕,一起迎接2024年***********************************************'; 
  review = '评论'; 
  context = '一起迎接2024年,***********************************************************************************'; 
  list = [0, 0, 0, 0]; 
 
  build() { 
    Flex() { 
      Scroll(this.scrollerForScroll) { 
        Column({ space: 5 }) { 
          Text(this.title) 
            .fontSize(40) 
            .padding(40) 
          List() { 
            ForEach(this.list, () => { 
              ListItem() { 
                Text(this.context).fontSize(16) 
              } 
            }) 
          } 
 
          Web({ src: $rawfile('index.html'), controller: this.controller, renderMode: RenderMode.SYNC_RENDER }) 
            .nestedScroll({ 
              scrollForward: NestedScrollMode.SELF_FIRST, 
              scrollBackward: NestedScrollMode.SELF_FIRST 
            }) 
            .height('100%') 
            .width('100%') 
            .layoutMode(WebLayoutMode.FIT_CONTENT) 
          Text(this.review) 
            .fontSize(30) 
          List() { 
            ForEach(this.list, () => { 
              ListItem() { 
                Text(this.context) 
                  .fontSize(16) 
              } 
            }) 
          } 
        } 
        .width('95%') 
      } 
      .scrollBar(BarState.Off) 
      .width('100%') 
      .height('120%') 
      .scrollable(this.ScrollDirection) 
    } 
    .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.
分享
微博
QQ
微信
回复
2024-09-05 18:32:26


相关问题
HarmonyOS Scroll嵌套List滑动问题
730浏览 • 1回复 待解决
HarmonyOS ListWeb嵌套问题
665浏览 • 1回复 待解决
WebList嵌套手势冲突问题
1652浏览 • 1回复 待解决
HarmonyOS list嵌套MapComponent滑动冲突
553浏览 • 1回复 待解决
HarmonyOS Tabs和Web嵌套左右滑动问题
884浏览 • 1回复 待解决
HarmonyOS Web组件和List嵌套使用问题
1270浏览 • 1回复 待解决
HarmonyOS List嵌套ListList嵌套Grid问题
851浏览 • 1回复 待解决
scroll和list嵌套滑动
2505浏览 • 1回复 待解决
HarmonyOS scroll嵌套List不能整体滑动
1313浏览 • 1回复 待解决
HarmonyOS List嵌套waterflow滑动卡顿
981浏览 • 1回复 待解决
Tab组件内嵌web view左右滑动切换问题
1060浏览 • 1回复 待解决
HarmonyOS Scroll中嵌套List滑动事件冲突
784浏览 • 1回复 待解决
HarmonyOS scroll嵌套list页面无法滑动
1322浏览 • 1回复 待解决
HarmonyOS 嵌套滑动问题
1068浏览 • 1回复 待解决
HarmonyOS Scroll+web+list嵌套滑行
607浏览 • 1回复 待解决
HarmonyOS List+Swipe+web滑动冲突
649浏览 • 1回复 待解决
HarmonyOS list滑动问题
1456浏览 • 1回复 待解决