HarmonyOS 鸿蒙Next scrollbar显示不出来，能否帮忙出一个解决方案

HarmonyOS 鸿蒙Next scrollbar显示不出来，能否帮忙出一个解决方案 关于scrollbar在list下方，我们需要把scrollbar放到list上面，自定义scrollbar能否出一个解决方案？

2 回复

list本身不可以滑动，只能使用ScrollBar来控制滑动

可参考以下方法实现：

// xxx.ets
@Entry
@Component
struct ScrollBarExample {
private scroller: Scroller = new Scroller()
private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
private isScrollTouch: boolean = false

build() {
Column() {
Stack({ alignContent: Alignment.End }) {
Scroll(this.scroller) {
Flex({ direction: FlexDirection.Column }) {
ForEach(this.arr, (item: number) => {
Row() {
Text(item.toString())
.width('80%')
.height(60)
.backgroundColor('#3366CC')
.borderRadius(15)
.fontSize(16)
.textAlign(TextAlign.Center)
.margin({ top: 5 })
}
}, (item: number) => item.toString())
}.margin({ right: 15 })
}
.width('90%')
.scrollBar(BarState.Off)
.scrollable(ScrollDirection.Vertical)
.onScrollFrameBegin((offset: number, state: ScrollState) => {
if (this.isScrollTouch) {
return { offsetRemain: 0 }
}
return { offsetRemain: offset }
})
.onTouch(() => {
if (!this.isScrollTouch) {
this.isScrollTouch = true
}
})

ScrollBar({ scroller: this.scroller, direction: ScrollBarDirection.Vertical, state: BarState.Auto }) {
Text()
.width(20)
.height(100)
.borderRadius(10)
.backgroundColor('#C0C0C0')
}.width(20).backgroundColor('#ededed')
.onTouch(() => {
if (this.isScrollTouch) {
this.isScrollTouch = false
}
})
}
}
}

更多关于HarmonyOS 鸿蒙Next scrollbar显示不出来，能否帮忙出一个解决方案的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对HarmonyOS（鸿蒙）Next scrollbar显示不出来的问题，可以尝试以下解决方案：

  1. 检查布局文件：

    • 确保你的布局文件中已经正确添加了滚动视图（ScrollView）或列表视图（ListView等）组件。
    • 检查这些组件的属性设置，确保scrollbars属性被设置为vertical或horizontal，或者同时设置，根据需要显示滚动条的方向来决定。

  2. 检查样式和主题：

    • 有时候自定义样式或主题可能会覆盖默认的滚动条显示行为。检查你的应用主题和样式文件，确保没有禁用或隐藏滚动条的属性。

  3. 代码检查：

    • 如果你是通过代码动态添加滚动视图，确保在添加视图后正确设置了滚动条属性。
    • 检查是否有代码逻辑错误导致滚动视图未能正确加载或显示。

  4. 系统兼容性：

    • 确保你的鸿蒙系统版本支持你正在使用的滚动视图组件和属性。

  5. 重启设备或应用：

    • 有时候简单的重启设备或应用可以解决一些显示问题。

如果以上方法仍然无法解决问题，可能是更复杂的系统或应用层面的问题。此时，建议直接联系鸿蒙系统的官方客服寻求帮助。官网客服地址是：https://www.itying.com/category-93-b0.html，

回到顶部