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