HarmonyOS鸿蒙Next应用开发中scroll组件的滚动条怎么关闭惯性滚动

HarmonyOS鸿蒙Next应用开发中scroll组件的滚动条怎么关闭惯性滚动 我需要当用户拖动scroll组件或list组件的右边的滚动条时能正常带动内容滚动，松手时立马停止滚动条，在官网上并没有找到滚动条如何关闭惯性滚动的方法

12 回复

开发者您好，可以在List组件中使用onWillScroll回调，判断当前滚动来源是否是滚动条惯性滚动，如果是，则返回0的偏移量，让List组件停止滚动。

示例代码如下：

@Entry
@Component
struct Index {
  build () {
    Row () {
      Column () {
        Stack () {
          List () {
            ForEach (Array.from ({ length: 100 }), (item: number, index) => {
              ListItem () {
                Stack () {
                  Text (`${index}`);
                }
                .width ('100%')
                .height (100)
                .backgroundColor ('#fff');
              };
            });
          }
          .backgroundColor ('#ccc')
          .width ('100%')
          .height ('100%')
          .onWillScroll ((offset, state, source) => {
            if (source == ScrollSource.SCROLL_BAR_FLING) {
              return { offsetRemain: 0 };
            }
            return undefined;
          });
        };
      }
      .width ('100%');
    }
    .height ('100%')
    .id ('root');
  }
}

更多关于HarmonyOS鸿蒙Next应用开发中scroll组件的滚动条怎么关闭惯性滚动的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


欧克，解决了，谢谢你，

开发者您好，您可以设置friction：设置摩擦系数，手动划动滚动区域时生效，仅影响惯性滚动过程。设置为小于等于0的值时，按默认值处理。

示例代码如下：

@Entry
@Component
struct ListExample {
  private arr: Array<number> = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9,0, 1, 2, 3, 4, 5, 6, 7, 8, 9,0, 1, 2, 3, 4, 5, 6, 7, 8, 9,0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

  build() {
    Column() {
      List({ space: 20, initialIndex: 0 }) {
        ForEach(this.arr, (item: number) => {
          ListItem() {
            Text('' + item)
              .width('100%').height(100).fontSize(16)
              .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
          }
        }, (item: number) => item.toString())
      }
      .listDirection(Axis.Vertical) // 排列方向
      .scrollBar(BarState.Off)
      .friction(8) // 设置摩擦系数
      .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
      .edgeEffect(EdgeEffect.None) // 边缘效果设置为None
      .width('90%')
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xDCDCDC)
    .padding({ top: 5 })
  }
}

您好，不是内容区滑动的惯性滚动，是右边滑动条，拖动滑动条松手的时候滑动条会有惯性滑动的效果，会带动内容滚动，滑动条不受friction摩擦系数的影响，

尊敬的开发者，您好！请问您是在什么样的业务场景中使用该能力，交互流程是怎样的，在哪一个环节遇到了问题？方便说明能力不满足可能带来的影响：什么时间用到？是否高频？有无三方库可以做到？若提供该能力，是否会造成大工作量返工？请您注意提供的内容不要包含您或第三方的非公开信息，如给您带来不便，敬请谅解。

在文本编辑器中拖动滑动条查看文本，松手想停止到这个位置，经常会惯性滚动一点。当前这个网页右边滚动条的这种效果就是理想的效果，拖动滑动条松手立马就停止滚动，可以对比一下拖动鸿蒙中scroll组件的滑动条。

在onScrollStop事件中添加滚动停止时的处理代码。

该事件在滚动停止时触发。手拖动Scroll或拖动Scroll的滚动条触发的滚动，手离开屏幕后滚动停止时会触发该事件。使用Scroller滚动控制器触发的带动画的滚动，动画停止时会触发该事件。

触发该事件的条件：

1、滚动组件触发滚动后停止，支持键鼠操作等其他触发滚动的输入设置。

2、通过滚动控制器API接口调用后开始，带过渡动效。

onScrollStop事件只有在惯性滚动结束之后才会触发，

简单一点的话，你可以设置一下这个属性：friction，设置一下滑动摩擦系数。可以模拟出来。

复杂一点的话，你就得获取屏幕滑动距离，然后用scroller控制scroll（）组件的滑动距离了。

好的，我试试复杂的这个，

在HarmonyOS Next中，要关闭Scroll组件的惯性滚动，可以设置其friction属性。将friction的值设置为一个大于等于1的数值，即可有效降低或消除滚动后的惯性效果。例如，设置为1时，滚动会立即停止，没有惯性。这是通过调整滚动阻力系数来实现的。

在HarmonyOS Next应用开发中，可以通过设置滚动组件的friction属性来控制或关闭惯性滚动。

对于ArkUI（特别是声明式开发范式）中的滚动组件，如Scroll或List，其滚动行为由Scroll组件的scrollable属性控制。要关闭惯性滚动，核心是设置其滚动模式的friction（摩擦系数）。

具体方法如下：

  1. 使用Scroll组件：在声明式UI中，为Scroll组件设置scrollable属性。
  2. 配置滚动参数：在scrollable中，通过ScrollOptions的friction参数来控制惯性。
    • friction值是一个数字，代表滚动阻力。
    • 将其设置为1或一个较大的值（如100），可以极大程度地抑制或消除惯性滚动效果。当用户松手时，滚动会因“高摩擦”而迅速停止。
    • 标准滚动行为的值通常远小于1（例如0.6），设置为1是关闭惯性的常用方式。

示例代码（ArkUI声明式范式）：

Scroll() {
  // 你的滚动内容...
}
.scrollable(ScrollDirection.Vertical) // 设置垂直方向可滚动
.scrollBar(BarState.Auto) // 显示滚动条
.scrollBarColor(Color.Gray)
.scrollBarWidth(10)
.friction(1) // 关键设置：将摩擦系数设为1，即可关闭惯性滚动
.edgeEffect(EdgeEffect.None)

代码说明：

  • .friction(1)：这一行是解决问题的关键。它将滚动摩擦系数设置为1，使得滚动几乎没有惯性，符合你描述的“松手时立马停止滚动条”的需求。
  • 其他属性（如.scrollBar）用于控制滚动条的显示，按需配置即可。

对于List组件，其本质也是基于滚动的容器，因此方法相同：

List() {
  // 列表项...
}
.scrollBar(BarState.Auto)
.friction(1) // 同样通过friction属性关闭惯性

总结： 在HarmonyOS Next的ArkUI声明式开发中，关闭Scroll或List组件滚动条惯性滚动的直接有效方法，是设置组件的.friction(1)属性。这能确保用户拖动滚动条松手后，内容滚动立即停止，不会有后续的惯性滑动。

回到顶部