HarmonyOS 使用ScrollBar组件,横向内容很长时,左右滑动,底部滑块不移动

使用ScrollBar组件,横向内容很长时,左右滑动,底部滑块不移动

代码:

private scroller: Scroller = new Scroller()
private designRate: number = 1;
List({ scroller: this.scroller, space: this.gridBreakPoint == 'sm' ? 5 * this.designRate : 12 }) {
  ListItem(){

  }.width(2000).height(100).linearGradient({
    direction: GradientDirection.Left, // 渐变方向
    repeating: true, // 渐变颜色是否重复
    colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // 数组末尾元素占比小于1时满足重复着色效果
  })
}
.listDirection(Axis.Horizontal)
.scrollBar(BarState.Off)
.edgeEffect(EdgeEffect.Spring)
.padding({ top: 10 })

ScrollBar({ scroller: this.scroller, direction: ScrollBarDirection.Horizontal, state: BarState.On }) {
  Text()
    .width(16)
    .height(5)
    .backgroundColor('#FF6257')
    .borderRadius(3 * this.designRate)
}
.width(24)
.height(5)
.margin({ top: 7 })
.backgroundColor('rgba(255, 98, 87, 0.31)')
.borderRadius(3)
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
HarmonyOS
2025-01-09 15:28:29
1205浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
fox280

示例参考如下:

@Entry
@Component
struct Index {
  private scroller: Scroller = new Scroller()

  build() {
    Column() {
      Stack({ alignContent: Alignment.End }) {
        List({ scroller: this.scroller, space: 5 }) {
          ListItem(){

          }.width(2000).height(100).linearGradient({
            direction: GradientDirection.Left, // 渐变方向
            repeating: true, // 渐变颜色是否重复
            colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // 数组末尾元素占比小于1时满足重复着色效果
          })
        }
        .listDirection(Axis.Horizontal)
        .scrollBar(BarState.Off)
        .edgeEffect(EdgeEffect.Spring)
        .padding({ top: 10 })
        .width('90%')
        .scrollBar(BarState.Off)
        ScrollBar({ scroller: this.scroller, direction: ScrollBarDirection.Horizontal, state: BarState.On }) {
          Text()
            .width(16)
            .height(5)
            .backgroundColor('#FF6257')
            .borderRadius(3)
        }
        .width(24)
        .height(5)
        .margin({ top: 7 })
        .backgroundColor('rgba(255, 98, 87, 0.31)')
        .borderRadius(3)
      }
    }
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
分享
微博
QQ
微信
回复
2025-01-09 16:42:13


相关问题
HarmonyOS Grid横向滑动
1164浏览 • 1回复 待解决
tabs组件 左右滑动延迟较高
1553浏览 • 1回复 待解决
HarmonyOS image图片纵向横向滑动
573浏览 • 1回复 待解决
Tab组件内嵌web view左右滑动切换问题
1083浏览 • 1回复 待解决
HarmonyOS Tabs和横向Scroll滑动冲突
821浏览 • 1回复 待解决
HarmonyOS 滑动组件问题
730浏览 • 1回复 待解决
HarmonyOS如何禁止页面左右滑动返回
1961浏览 • 1回复 待解决