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)
HarmonyOS
2025-01-09 15:28:29
浏览
收藏 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)
      }
    }
  }
}
分享
微博
QQ
微信
回复
2025-01-09 16:42:13
相关问题
HarmonyOS Grid横向滑动
792浏览 • 1回复 待解决
tabs组件 左右滑动延迟较高
1226浏览 • 1回复 待解决
HarmonyOS image图片纵向横向滑动
223浏览 • 1回复 待解决
Tab组件内嵌web view左右滑动切换问题
686浏览 • 1回复 待解决
HarmonyOS Tabs和横向Scroll滑动冲突
394浏览 • 1回复 待解决
HarmonyOS 滑动组件问题
379浏览 • 1回复 待解决
HarmonyOS如何禁止页面左右滑动返回
1333浏览 • 1回复 待解决