鸿蒙Next中如何禁止组件滑动

在鸿蒙Next开发中，我使用Scroll组件嵌套了多个子组件，但希望固定其中某个特定组件不允许滑动。尝试设置scrollable(false)无效，应该如何正确实现禁止部分组件滑动的效果？例如列表中的标题栏需要固定，其余内容可滚动。

2 回复

鸿蒙Next里禁止组件滑动？简单！
在Scroll或Swiper组件里设置scrollEnabled(false)或enableSwipe(false)，直接让滑动“躺平”！
代码示例：

Scroll() {  
  // 内容  
}  
.scrollEnabled(false)

搞定，滑动已封印！

更多关于鸿蒙Next中如何禁止组件滑动的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中，可以通过以下方式禁止组件滑动：

方法一：设置Scroll组件的scrollable属性为false

Scroll() {
  // 组件内容
}
.scrollable(false)

方法二：使用Column/Row等布局组件替代Scroll

如果不需要滚动功能，直接使用非滚动容器：

Column() {
  // 组件内容
}
.width('100%')
.height('100%')

方法三：设置Scroll组件的scrollBar属性为BarState.Off

Scroll() {
  // 组件内容
}
.scrollBar(BarState.Off)
.scrollable(false)

方法四：使用Stack布局覆盖滑动区域

Stack() {
  Scroll() {
    // 内容
  }
  .scrollable(false)
  
  // 覆盖层，阻止触摸事件
  Blank()
    .width('100%')
    .height('100%')
}

推荐方案

最简单有效的方法是使用第一种，直接设置.scrollable(false)：

@Entry
@Component
struct MyComponent {
  build() {
    Scroll() {
      Column() {
        Text('禁止滑动的组件')
          .fontSize(20)
          .margin(10)
        // 其他组件...
      }
    }
    .scrollable(false)  // 关键：禁止滑动
    .width('100%')
    .height('100%')
  }
}

这样就能完全禁止组件的滑动行为，同时保持其他交互功能正常。

回到顶部