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水平布局如何根据内容自适应高度
280浏览 • 1回复 待解决
Web组件如何实现嵌套滑动,如何实现web控件的自适应高度
2134浏览 • 1回复 待解决
Web组件如何实现高度自适应?
718浏览 • 1回复 待解决
HarmonyOS web组件自适应高度问题
281浏览 • 1回复 待解决
HarmonyOS Web高度自适应问题
163浏览 • 1回复 待解决
HarmonyOS List嵌套Grid,Grid怎么自适应高度
246浏览 • 1回复 待解决
HarmonyOS webview嵌套在布局中间,高度和滚动问题
165浏览 • 1回复 待解决
自适应缩放布局如何实现
160浏览 • 1回复 待解决
Grid组件如何实现高度自适应
2700浏览 • 1回复 待解决
HarmonyOS 如何实现listItem高度随内容自适应
122浏览 • 1回复 待解决
HarmonyOS Web组件偶现出现页面布局错乱
74浏览 • 1回复 待解决
如何实现右边不动,左边自适应的布局
521浏览 • 1回复 待解决
HarmonyOS 自适应父组件高度问题
372浏览 • 1回复 待解决
使用List嵌套实现表格布局
652浏览 • 1回复 待解决
HarmonyOS web嵌套到scroll里面之后获取的高度不对
133浏览 • 1回复 待解决
使用List组件实现多列布局
190浏览 • 1回复 待解决
scroll中嵌套一个或多个grid,如何实现嵌套滚动?
1685浏览 • 1回复 待解决
List、Scroll、Swipper 、web等嵌套使用滑动冲突问题
299浏览 • 1回复 待解决
在嵌套组件中Scroll不生效
1794浏览 • 1回复 待解决
HarmonyOS RelativeContainer组件的宽高如何随着子组件布局自适应大小,column和row都可以
159浏览 • 1回复 待解决
HarmonyOS Web 组件修改布局(如padding、height属性)展示异常
108浏览 • 1回复 待解决
RelativeContainer作为根布局容器,如果高度不设置默认全屏,高度需要自适应该如何设置呢
1647浏览 • 1回复 待解决
Web组件中的预加载,如何实现?
666浏览 • 1回复 待解决
ArkTS布局组件实现瀑布流式布局
559浏览 • 1回复 待解决
HarmonyOS Scroll组件设置最大高度,未超过最大高度就是内容高度
196浏览 • 1回复 待解决
在web和scroll上同时加上 .nestedScroll({scrollForward: NestedScrollMode.PARENT_FIRST,scrollBackward: NestedScrollMode.SELF_FIRST })
核心代码如下: