HarmonyOS List和Web嵌套问题

代码片段:

import { webview } from '@kit.ArkWeb';
@Entry
@Component
struct ArticleDetailPage {
  controller: webview.WebviewController = new webview.WebviewController();
  build() {
    Column() {
      List() {
        ListItem() {
          this.titleBuilder()
        }
        ListItem() {
          this.webBuilder()
        }.hitTestBehavior(HitTestMode.Block)
      }
      .height('100%')
      .width('100%')
    }
  }

  @Builder
  titleBuilder() {
    Column() {
      Text('标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题')
        .fontSize(22)
        .fontColor('#333333')
        .fontWeight(FontWeight.Bold)
        .width('100%')
      Row({ space: 12 }) {
        Text('证券时报网 李捷').fontSize(14).fontColor('#999999')
        Text('2024-06-26 10:00')
          .fontSize(14)
          .fontColor('#999999')
      }.width('100%').margin({ top: 12 })
    }.padding({ left: 20, top: 20, right: 20 })
  }

  @Builder
  webBuilder() {
    Web({
      src: 'https://mo.mbd.huawei.com/r/1luGMZf1l5K?f=cp&rs=689114949&ruk=El3XPsRK2yXiiBsc21uK2A&u=a178defbbd8c5bbf',
      controller: this.controller
    })
      .nestedScroll({
        scrollForward: NestedScrollMode.SELF_FIRST,
        scrollBackward: NestedScrollMode.SELF_FIRST
      })
      .margin({
        left: 17,
        right: 17,
        top: 25,
        bottom: 20
      })
      .width('calc(100% - 40vp)')
      .height('100%')
      .layoutMode(WebLayoutMode.FIT_CONTENT)
  }
}

遇到问题:

1、List的ListItem设置hitTestBehavior(HitTestMode.Block) 后不能自身响应触摸事件

2、Web设置layoutMode(WebLayoutMode.FIT_CONTENT)后高度不能自适应

HarmonyOS
16h前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Heiang

可参考代码如下:

import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct ArticleDetailPage {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      List() {
        ListItem() {
          this.titleBuilder()
        }

        ListItem() {
          this.webBuilder()
        }
      }
      .height('100%')
      .width('100%')
      .hitTestBehavior(HitTestMode.Block)
    }
  }

  @Builder
  titleBuilder() {
    Column() {
      Text('标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题')
        .fontSize(22)
        .fontColor('#333333')
        .fontWeight(FontWeight.Bold)
        .width('100%')
      Row({ space: 12 }) {
        Text('证券时报网 李捷').fontSize(14).fontColor('#999999')
        Text('2024-06-26 10:00')
          .fontSize(14)
          .fontColor('#999999')
      }.width('100%').margin({ top: 12 })
    }.padding({ left: 20, top: 20, right: 20 })
  }

  @Builder
  webBuilder() {
    Web({
      src: 'https://mo.mbd.huawei.com/r/1luGMZf1l5K?f=cp&rs=689114949&ruk=El3XPsRK2yXiiBsc21uK2A&u=a178defbbd8c5bbf',
      controller: this.controller,
      renderMode: RenderMode.SYNC_RENDER
    })
      .domStorageAccess(true)
      .height('100%')
      .margin({
        left: 17,
        right: 17,
        top: 25,
        bottom: 20
      })
      .nestedScroll({
        scrollForward: NestedScrollMode.SELF_FIRST,
        scrollBackward: NestedScrollMode.SELF_FIRST
      })
      .width('calc(100% - 40vp)')
      .verticalScrollBarAccess(false)
      .overScrollMode(OverScrollMode.NEVER)
      .layoutMode(WebLayoutMode.FIT_CONTENT)
  }
}
分享
微博
QQ
微信
回复
14h前
相关问题
refresh + scroll+list嵌套问题
399浏览 • 1回复 待解决
HarmonyOS 组件嵌套问题
391浏览 • 1回复 待解决
HarmonyOS WaterFlow嵌套问题
70浏览 • 1回复 待解决
WebList嵌套手势冲突问题
1043浏览 • 1回复 待解决
HarmonyOS Web组件List嵌套使用问题
287浏览 • 1回复 待解决
HarmonyOS list 嵌套web滑动切换问题
504浏览 • 1回复 待解决
HarmonyOS TabsWeb嵌套左右滑动问题
364浏览 • 1回复 待解决
HarmonyOS Scroll+web+list嵌套滑行
27浏览 • 1回复 待解决
scrolllist嵌套滑动
1546浏览 • 1回复 待解决
HarmonyOS scroll嵌套多个web,显示问题
70浏览 • 1回复 待解决
HarmonyOS List嵌套list中的布局
37浏览 • 1回复 待解决
HarmonyOS List嵌套不能同步数据
334浏览 • 1回复 待解决
HarmonyOS gridlist混合布局问题
26浏览 • 1回复 待解决
HarmonyOS scroll嵌套List不能整体滑动
516浏览 • 1回复 待解决
HarmonyOS List嵌套waterflow滑动卡顿
301浏览 • 1回复 待解决