HarmonyOS 鸿蒙Next:如何设置scroll不滑动但可点击其他区域滑动
HarmonyOS 鸿蒙Next:如何设置scroll不滑动但可点击其他区域滑动
上图有两个scroll组件
我想控制的一个scroll组件无法通过拖拽滑动,但是可以拖拽下方数据带动上方数据移动
请问如何设置?
可以试试以下方法:
- 禁用滚动组件的拖拽滑动:通过设置滚动组件的相关属性来禁用拖拽滑动。
- 使用自定义拖拽事件控制上方数据移动:通过监听下方数据的拖拽事件,手动控制上方数据的移动。
[@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) => {
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) => {
<span class="hljs-comment"><span class="hljs-comment">// 开始拖拽事件处理</span></span>
})
.onDragUpdate((event) => {
<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) => {
<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>
在HarmonyOS中,要实现Scroll组件不滑动但允许点击其他区域滑动,可以通过设置Scroll组件的滚动方向为不可滚动(通常是通过不设置滚动方向或显式设置为非滚动),并确保Scroll内部组件的布局不会超出Scroll的视窗范围。同时,确保其他区域(如与Scroll并行的组件或父容器中的其他元素)的滚动设置是开启的。
如果问题依旧没法解决请加我微信,我的微信是itying888。