HarmonyOS 鸿蒙Next List嵌套Web滑动冲突

发布于 1周前 作者 itying888 来自 鸿蒙OS

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 回复

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


针对HarmonyOS鸿蒙系统中Next List嵌套Web组件出现的滑动冲突问题,通常这是由于两个可滑动组件的触摸事件处理不当导致的。以下是一些可能的解决方案:

  1. 事件拦截:检查并调整Next List和Web组件的触摸事件拦截逻辑。确保当一个组件正在处理滑动时,另一个组件不会同时响应滑动事件。可以通过重写触摸事件处理方法,如onTouchEvent,来实现更精细的事件分发控制。

  2. 滚动冲突解决策略:在嵌套结构中,为外层或内层组件设置特定的滚动策略。例如,可以在外层Next List的滚动达到边界时,允许内层Web组件接管滑动事件;或者在内层Web组件滚动到底部/顶部时,将滑动事件传递给外层Next List。

  3. 使用官方组件库:确保使用的Next List和Web组件都是HarmonyOS官方推荐或提供的,以避免因第三方组件库导致的兼容性问题。

  4. 布局优化:检查布局结构,确保没有不必要的嵌套或重叠,这可能影响滑动事件的正确传递。

如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html

回到顶部