HarmonyOS app商品详情页,根据提供的demo,如何解决Webview scrollForward正向滚动卡顿的问题
当前版本的app商品详情页,根据提供的demo,如何解决Webview scrollForward正向滚动卡顿的问题
如下demo
import web_webview from '@ohos.web.webview';
import { BusinessError } from '@kit.BasicServicesKit';
@Entry
@Component
export struct WebScrollerDemo {
private scrollTouchDown: boolean = false;
private webTouchDown: boolean = false;
private scrolling: boolean = false;
private scroller: Scroller = new Scroller()
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Scroll(this.scroller) {
Column() {
Text("Scroll Area")
.width("100%")
.height(400)
.backgroundColor(0X330000FF)
.fontSize(16)
.textAlign(TextAlign.Center)
Web({
controller: this.controller,
src: "xxx",
}).height("100%").width("100%")
.nestedScroll({
scrollForward: NestedScrollMode.PARENT_FIRST,
scrollBackward: NestedScrollMode.SELF_FIRST
})
.onTouch((event: TouchEvent) => {
if (event.type === TouchType.Down) {
this.webTouchDown = true;
} else if (event.type == TouchType.Up) {
this.webTouchDown = false;
}
try {
let pageHeight = this.controller.getPageHeight();
console.log("testTag: Web pageHeight : " + pageHeight);
} catch (error) {
console.error(`testTag: Web ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
}
})
}.width("100%")
}
.onTouch((event: TouchEvent) => {
if (event.type == TouchType.Down) {
this.scrollTouchDown = true;
} else if (event.type == TouchType.Up) {
this.scrollTouchDown = false;
}
try {
let pageHeight = this.controller.getPageHeight();
console.log("testTag: Web pageHeight : " + pageHeight);
} catch (error) {
console.error(`testTag: Web ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
}
})
.onScrollFrameBegin((offset: number, state: ScrollState) => {
let yOffset: number = this.scroller.currentOffset().yOffset
if (this.scrolling && offset > 0) {
if (yOffset >= 400) { // 400为上面Text组件高度
this.controller.scrollBy(0, offset)
return { offsetRemain: 0 }
} else if (yOffset + offset > 400) {
this.controller.scrollBy(0, yOffset + offset - 400)
return { offsetRemain: 400 - yOffset }
}
}
return { offsetRemain: offset }
})
.onScrollStart(() => {
if (this.scrollTouchDown && !this.webTouchDown) {
this.scrolling = true;
}
})
.onScrollStop(() => {
this.scrolling = false;
})
.edgeEffect(EdgeEffect.Spring)
.backgroundColor('#DCDCDC')
.scrollBar(BarState.On)
.width('100%')
.height('100%')
.onAreaChange( (oldValue: Area, newValue: Area) => {
console.log('testTag: ' + vp2px(newValue.height as number))
})
}
}
HarmonyOS
赞
收藏 0
回答 1
待解决
相关问题
商品详情页面的常规布局方式
1448浏览 • 1回复 待解决
如何启动应用的系统设置详情页
2950浏览 • 1回复 待解决
如何跳转设置—应用详情页
2902浏览 • 1回复 待解决
HarmonyOS 跳转华为应用商店详情页
2879浏览 • 1回复 待解决
HarmonyOS 如何分析webview加载是否卡顿APP主线程?
1426浏览 • 1回复 待解决
CustomDialog如何实现半模态详情页效果
2576浏览 • 1回复 待解决
列表项添加点击跳转详情页的功能
265浏览 • 0回复 待解决
HarmonyOS 已经上架的应用无法拉起应用详情页
1022浏览 • 1回复 待解决
求助,如何在鸿蒙平台上通过WebView展示商品详情的HTML页面?
645浏览 • 1回复 待解决
HarmonyOS 应用市场详情页是否支持半屏呼起
1005浏览 • 1回复 待解决
如何解决webview离线加载白屏问题
2696浏览 • 1回复 待解决
如何解决webview loaddata白屏问题
2289浏览 • 1回复 待解决
能否应用内展示应用市场详情页并下载
1765浏览 • 1回复 待解决
HarmonyOS 跳转系统设置-app详情页面报错
1130浏览 • 1回复 待解决
原生 HarmonyOS app 中如何跳转到 HarmonyOS 应用市场指定页面,如应用市场应用介绍详情页
1876浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在HarmonyOS中实现卡片组件与详情页的转场动画?
895浏览 • 1回复 待解决
鸿蒙开发中 ListView 滚动卡顿,如何优化?
1116浏览 • 0回复 待解决
HarmonyOS 能否实现从app中跳转到华为应用市场中对应的应用详情页并进行评分
1178浏览 • 1回复 待解决
鸿蒙卡顿优化,如何检测线上卡顿?
676浏览 • 0回复 待解决
HarmonyOS 在应用中如何跳转到华为应用市场应用详情页下?
1214浏览 • 1回复 待解决
HarmonyOS WebView加载H5卡顿
1253浏览 • 1回复 待解决
如何跳转到设置中的应用详情页面
3367浏览 • 1回复 待解决
HarmonyOS 跳转进去通知设置的App的详情页面和接受回调
890浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在知乎日报详情页中处理HTML内容?
1129浏览 • 1回复 待解决
HarmonyOS 应用市场详情页面地址
939浏览 • 1回复 待解决
onScrollFrameBegin使用规范有些要求,请按规范要求更改demo
若通过onScrollFrameBegin事件和scrollBy方法实现容器嵌套滚动,需设置子滚动节点的EdgeEffect为None。如Scroll嵌套List滚动时,List组件的edgeEffect属性需设置为EdgeEffect.None
参考:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-scroll-V5#onscrollframebegin9