HarmonyOS 鸿蒙Next:如何设置scroll不滑动但可点击其他区域滑动

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

HarmonyOS 鸿蒙Next:如何设置scroll不滑动但可点击其他区域滑动

cke_223.png

上图有两个scroll组件

我想控制的一个scroll组件无法通过拖拽滑动,但是可以拖拽下方数据带动上方数据移动

请问如何设置?

3 回复

可以试试以下方法: 

  • 禁用滚动组件的拖拽滑动:通过设置滚动组件的相关属性来禁用拖拽滑动。
  • 使用自定义拖拽事件控制上方数据移动:通过监听下方数据的拖拽事件,手动控制上方数据的移动。
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Main {
  [@State](/user/State) yOffset: number = 0;

build() { Column() { // 上方数据(不能通过拖拽滑动,但可以被下方数据带动) Scroll(this.scroll) { Column() { ForEach((index: number) => { Text(上方数据 ${index + <span class="hljs-number"><span class="hljs-number">1</span></span>}) .width(‘100%’) .height(100) .backgroundColor(Color.LightGray) .fontSize(30) .fontColor(Color.Black); }, Array.from({ length: 20 })); } } .scrollable(false) // 禁用拖拽滑动

  <span class="hljs-comment"><span class="hljs-comment">// 下方数据(拖拽时带动上方数据移动)</span></span>
  Column() {
    ForEach((index: number) =&gt; {
      Text(`下方数据 ${index + <span class="hljs-number"><span class="hljs-number">1</span></span>}`)
        .width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)
        .height(<span class="hljs-number"><span class="hljs-number">100</span></span>)
        .backgroundColor(Color.Orange)
        .fontSize(<span class="hljs-number"><span class="hljs-number">30</span></span>)
        .fontColor(Color.White)
        .onDragStart((event) =&gt; {
          <span class="hljs-comment"><span class="hljs-comment">// 开始拖拽事件处理</span></span>
        })
        .onDragUpdate((event) =&gt; {
          <span class="hljs-comment"><span class="hljs-comment">// 拖拽更新事件处理,带动上方数据移动</span></span>
          <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.yOffset -= event.deltaY;
          console.log(<span class="hljs-string"><span class="hljs-string">'拖拽移动'</span></span>, <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.yOffset);
        })
        .onDragEnd((event) =&gt; {
          <span class="hljs-comment"><span class="hljs-comment">// 结束拖拽事件处理</span></span>
        });
    }, <span class="hljs-built_in"><span class="hljs-built_in">Array</span></span>.from({ length: <span class="hljs-number"><span class="hljs-number">20</span></span> }));
  }
}

} } <button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

 

有一种思路不知道可行否:在第一个scroll组件上加一个透明图视拦截底层的滑动事件

在HarmonyOS中,要实现Scroll组件不滑动但允许点击其他区域滑动,可以通过设置Scroll组件的滚动方向为不可滚动(通常是通过不设置滚动方向或显式设置为非滚动),并确保Scroll内部组件的布局不会超出Scroll的视窗范围。同时,确保其他区域(如与Scroll并行的组件或父容器中的其他元素)的滚动设置是开启的。

如果问题依旧没法解决请加我微信,我的微信是itying888。

回到顶部