HarmonyOS 鸿蒙Next 请问为什么横向滚动不起作用？demo如下

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

HarmonyOS 鸿蒙Next 请问为什么横向滚动不起作用？demo如下

@Entry
@Component
struct checkDemo{
scrollerForRow: Scroller = new Scroller()
@State list: string[] = [‘1’,‘1’,‘1’,‘1’,‘1’,‘1’,‘1’,‘1’,‘1’,‘1’]
build() {
Scroll(this.scrollerForRow) {
Row({ space: 10 }) {
ForEach(this.list, (item: string) => {
Image($r(‘app.media.default_avatar_man’))
.width(40)
.height(40)
.borderRadius(5)
})
}
.width(‘100%’)
.justifyContent(FlexAlign.Start)
.padding({
left: 10,
right: 10
})
}
.scrollable(ScrollDirection.Horizontal) // 滚动方向纵向
}
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

Harmonyos Next教程
2 回复

你可以使用List组件来实现

[@Entry](/user/Entry)
[@Component](/user/Component)
struct checkDemo {
  scrollerForRow: Scroller = new Scroller()
  [@State](/user/State) list: string[] = ['1', '1', '1', '1', '1']

build() {
List({ space: 10 }) {
ForEach(this.list, (item: string) => {
ListItem() {
Image($r(‘app.media.fig2’))
.width(40)
.height(40)
.borderRadius(5)
}
})
}.listDirection(Axis.Horizontal)
.alignListItem(ListItemAlign.Start)
}
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

针对您提出的HarmonyOS 鸿蒙Next横向滚动不起作用的问题，可能的原因及解决方案如下：

  1. 检查Scroll组件的scrollDirection属性：确保已正确设置为横向滚动，例如使用scrollDirection: 'horizontal'。
  2. 子组件布局与高度：Scroll组件的滚动是根据其子组件是否超出其可视范围来判断的。若子组件设置了与Scroll相同的高度（如100%），则可能无法触发滚动。请检查子组件的高度设置，确保其内容能够超出Scroll的可视范围。
  3. 滑动监听器与事件分发：确保为Scroll组件设置了正确的滑动监听器，并判断用户的滑动意图。如果Grid或其他组件内部需要响应水平滑动，而Scroll应响应垂直滑动，请确保在检测到相应方向的滑动时，允许对应控件消费事件。
  4. SDK版本与组件行为：不同版本的HarmonyOS可能对Scroll组件的行为有所调整。请确认您的SDK版本是否支持您想要实现的滚动行为。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部