HarmonyOS 横向Scroll定位到最右侧

示例代码：

@Entry
@Component
struct ScrollPage {
  scroller: Scroller = new Scroller()
  @State selectTimeType:number = 0;

  build() {
    Scroll(this.scroller){
      Row(){
        Text("全部")
          .fontSize(14)
          .padding({ left: 10, right: 10, top: 5, bottom: 5 })
          .borderRadius(3)
          .onClick(() => {
            this.selectTimeType = 0
          })

        Text("最近一周")
          .fontSize(14)
          .padding({ left: 10, right: 10, top: 5, bottom: 5 })
          .borderRadius(3)
          .onClick(() => {
            this.selectTimeType = 1;
          })

        Text("最近30天")
          .fontSize(14)
          .padding({ left: 10, right: 10, top: 5, bottom: 5 })
          .borderRadius(3)
          .onClick(() => {
            this.selectTimeType = 2;
          })

        Text("最近半年")
          .fontSize(14)
          .padding({ left: 10, right: 10, top: 5, bottom: 5 })
          .borderRadius(3)
          .onClick(() => {
            this.selectTimeType = 3;
          })

        Text("自选时间")
          .fontSize(14)
          .padding({ left: 10, right: 10, top: 5, bottom: 5 })
          .borderRadius(3)
          .onClick(() => {
            this.selectTimeType = 4;
            this.scroller.scrollEdge(Edge.End)
          })

        Row(){
          Text("开始时间")
            .fontSize(12)
            .padding({ left: 10, right: 10, top: 5, bottom: 5 })
            .onClick(() => {

            })

          Divider()
            .strokeWidth(0.5)
            .width(7)
            .margin({left: 3, right: 3})

          Text("结束时间")
            .fontSize(12)
            .padding({ left: 10, right: 10, top: 5, bottom: 5 })
            .onClick(() => {

            })
        }
        .alignItems(VerticalAlign.Center)
        .margin({left: 15, right: 15})
        .visibility(this.selectTimeType === 4 ? Visibility.Visible : Visibility.None)
      }
      .margin({top: 10, bottom: 10, left: 20, right: 10})
    }
    .scrollBar(BarState.Off)
    .scrollable(ScrollDirection.Horizontal)
    .edgeEffect(EdgeEffect.None)
  }
}

HarmonyOS

shlp

2024-12-24 16:22:26

浏览

回答 1

待解决

回答 1

按赞同

按时间

FengTianYa

scroll内的初始子组件无法支撑scroll的滚动，导致在点击“自选时间”的时候，无法滚动到最右侧，此时scroll还没有滚动的效果。需要在隐藏的部分显示出来，并且支撑起scroll的滚动。this.scroller.scrollEdge(Edge.End) 才会生效。

修改后的部分代码如下：

Text("自选时间")
  .fontSize(14)
  .padding({
    left: 10,
    right: 10,
    top: 5,
    bottom: 5
  })
  .borderRadius(3)
  .onClick(() => {
    //解决隐藏的部分显示后，滑动到左边，再次点击“自选时间”无法滚动到最右侧的问题
    if (this.selectTimeType === 4) {
      this.scroller.scrollEdge(Edge.End)
    }
    this.selectTimeType = 4;
  })

if (this.selectTimeType === 4) {
  Row() {
    ... //初始隐藏的部分
  }
  .alignItems(VerticalAlign.Center)
  .margin({ left: 15, right: 15 })
  .onAttach(() => {
    console.log('more is show')
  })
  .onDetach(() => {
    console.log('more is hiden')
  })
  .onAppear(() => {
    console.log('组件挂载显示后触发此回调')
    this.scroller.scrollEdge(Edge.End)
  })
}

2024-12-24 19:12:55

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 横向Scroll定位到最右侧

订阅鸿蒙技术特刊，精选内容抢先看