HarmonyOS 鸿蒙Next List嵌套Web滑动冲突
HarmonyOS 鸿蒙Next List嵌套Web滑动冲突 最小可运行demo,正常情况下 Web组件页面不应该滑动
import web_webview from '@ohos.web.webview'
import { MyAppBar } from '../../views/MyAppBar';
@Entry
@Component
export struct ScrollBugTestPage {
@State selectedIndex: number = 0
contentScroller: Scroller = new Scroller();
listTest = ["", "", "", "", "", "", "", ""]
@Builder
customTabBarWidget() {
Column() {
List({
initialIndex: this.selectedIndex,
space: 0,
scroller: this.contentScroller,
}) {
ForEach(this.listTest, (item: string, index) => {
if (index % 2 === 0) {
ListItem() {
Text("普通页面")
.width("100%")
.height("100%")
}
} else {
ListItem() {
Web({
src: "xx",
controller: new web_webview.WebviewController()
})
.width("100%")
.height("100%")
}
}
})
}
.listDirection(Axis.Horizontal)
.margin({ left: 0, right: 0 })
.scrollBar(BarState.Off)
.layoutWeight(1)
.enableScrollInteraction(false)
}
.width("100%")
.layoutWeight(1)
}
build() {
Column() {
MyAppBar({ title: "滑动冲突测试页面" })
List({
initialIndex: this.selectedIndex,
space: 16,
}) {
ForEach(this.listTest, (item: string, index) => {
ListItem() {
Column() {
Text(`标签${index}`)
.fontColor(Color.Black)
Text()
.width(20)
.height(2)
.borderRadius(1)
.backgroundColor(Color.Red)
.visibility(this.selectedIndex === index ? Visibility.Visible : Visibility.None)
}
.padding({
left: index === 0 ? 10 : 0,
})
.onClick(() => {
this.selectedIndex = index
this.contentScroller.scrollToIndex(index)
})
}
})
}
.listDirection(Axis.Horizontal)
.enableScrollInteraction(false)
.height(50)
.scrollBar(BarState.Off)
.alignListItem(ListItemAlign.Center)
this.customTabBarWidget()
}
}
}
更多关于HarmonyOS 鸿蒙Next List嵌套Web滑动冲突的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
1 回复