HarmonyOS Web组件嵌套在Scroll布局中或List布局中,如何实现Web组件高度根据内容自适应
Web组件嵌套在Scroll布局中或List布局中,如何实现Web组件(加载html代码)高度根据内容自适应,只有父组件滚动,Web自身不滚动。
页面布局如下:
Column(){
this.TopBar()//标题栏
this.Content()//内容区域,包含资讯标题、发布时间、资讯内容(Web)layoutWeight=1
this.BottomBar()//底部菜单操作按钮区域
}
其中内容区域布局:
@Builder
Content(){
Scroll(this.scrollerForScroll){
Column(){
Text('资讯标题')
.fontColor(Color.Black)
.fontSize('22fp')
.fontWeight(600)
.width('100%')
Text(`人民日报 2024-04-30`)
.fontColor(Color.Black)
.fontSize('14fp')
.fontWeight(400)
.width('100%')
.margin({top:'10vp'})
Web({ src:'www',controller:this.webController }) //高度需要根据内容自适应
.nestedScroll({
scrollForward:NestedScrollMode.SELF_FIRST,
scrollBackward:NestedScrollMode.SELF_FIRST
})
.layoutWeight(1)
.javaScriptAccess(true)
.domStorageAccess(true)
.fileAccess(true)
.defaultFontSize(this.webviewFontSize)
}
}
.width('100%')
.layoutWeight(1)
}
HarmonyOS
赞
收藏 0
回答 1
待解决
相关问题
List水平布局如何根据内容自适应高度
563浏览 • 1回复 待解决
Web组件如何实现嵌套滑动,如何实现web控件的自适应高度
2403浏览 • 1回复 待解决
Web组件如何实现高度自适应?
972浏览 • 1回复 待解决
HarmonyOS RelativeContainer、List组件怎么实现自适应内容高度
480浏览 • 2回复 待解决
HarmonyOS Web组件怎么和其它组件一起上下滑动?并且Web组件根据加载的url内容自适应高度?
156浏览 • 1回复 待解决
HarmonyOS web组件自适应高度问题
829浏览 • 1回复 待解决
HarmonyOS Web高度自适应问题
505浏览 • 1回复 待解决
鸿蒙系统中的自适应布局设计如何实现?
60浏览 • 0回复 待解决
Scroll嵌套web,如何实现可以流畅的滑动,Web内容高度会变化
215浏览 • 1回复 待解决
HarmonyOS List嵌套Grid,Grid怎么自适应高度
577浏览 • 1回复 待解决
HarmonyOS webview嵌套在布局中间,高度和滚动问题
430浏览 • 1回复 待解决
自适应缩放布局如何实现
366浏览 • 1回复 待解决
HarmonyOS Tabs组件,TabContent的高度无法自适应内容组件高度
265浏览 • 1回复 待解决
Grid组件如何实现高度自适应
3078浏览 • 1回复 待解决
RelativeContainer 里面嵌套子组件 text ,如何基于 text 的内容自适应高度?
279浏览 • 1回复 待解决
HarmonyOS 如何实现listItem高度随内容自适应
322浏览 • 1回复 待解决
HarmonyOS Web组件高度设置问题,Web组件内容被遮挡
183浏览 • 1回复 待解决
如何实现右边不动,左边自适应的布局
700浏览 • 1回复 待解决
HarmonyOS Web组件和List的嵌套使用问题
132浏览 • 1回复 待解决
HarmonyOS Web组件偶现出现页面布局错乱
260浏览 • 1回复 待解决
使用List嵌套实现表格布局
876浏览 • 1回复 待解决
HarmonyOS web嵌套到scroll里面之后获取的高度不对
399浏览 • 1回复 待解决
在嵌套组件中Scroll不生效
2035浏览 • 1回复 待解决
List、Scroll、Swipper 、web等嵌套使用滑动冲突问题
781浏览 • 1回复 待解决
scroll中嵌套一个或多个grid,如何实现嵌套滚动?
1997浏览 • 1回复 待解决
在web和scroll上同时加上 .nestedScroll({scrollForward: NestedScrollMode.PARENT_FIRST,scrollBackward: NestedScrollMode.SELF_FIRST })
核心代码如下: