HarmonyOS 鸿蒙Next List和Web嵌套问题

代码片段：
```javascript
import { webview } from '[@kit](/user/kit).ArkWeb';

[@Entry](/user/Entry)
[@Component](/user/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](/user/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](/user/Builder)
 webBuilder() {
 Web({
 src: '[https://xxx](https://xxx)',
 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 鸿蒙Next List和Web嵌套问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

phonegap100 1楼•2 天前

可参考代码如下：

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.baidu.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)
  }
}

更多关于HarmonyOS 鸿蒙Next List和Web嵌套问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

caililin 2楼•2 天前

根据所述需求,下面是一段参考代码:

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://xxx',
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)
}
}

作为参考,这段代码主要实现了一个名为ArticleDetailPage的组件,该组件包含一个WebviewController实例controller。在build方法中,使用Column和List组件创建了一个列表,其中包含两个ListItem。第一个ListItem调用titleBuilder方法,用于构建标题部分,包括标题文本和作者信息。第二个ListItem调用webBuilder方法,用于构建网页内容,并设置了触摸行为和布局模式。

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

根据所述需求,下面是一段参考代码:

@Builder
webBuilder() {
Web({
src:'https://xxx',
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)
}

作为参考,这段代码主要实现了一个名为webBuilder的方法,用于构建网页内容。在这个方法中,使用Web组件加载了一个URL,并设置了WebviewController实例controller。同时,设置了网页的边距、宽度和高度,以及布局模式。

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

根据所述需求,下面是一段参考代码:

@Builder
webBuilder() {
Web({
src:'https://xxx',
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)
}