HarmonyOS Scroll组件如何使用,才能让内容滚动

页面可能会比较长超出一个页面,想用Scroll控件让内容可以滚动。但是使用以下代码并不能滚动,请问我需要如何正确使用?可以给一个demo么?

Scroll(){
  Column() {
    // 很多控件
  }
  .width('100%')
  .height('100%')
}
.scrollBar(BarState.Off)
HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Excelsior_abit

可参考以下demo:

@Entry
@Component
struct ScrollExample {
  scroller: Scroller = new Scroller(); //创建滚动条
  private arr: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'L', 'J', 'K', 'M', 'N'];  //创建字符串数组

  build() {
    Scroll(this.scroller) { //使用滚动条包裹Column,实现竖向滚动展示的效果
      Column() {  //Column容器实现子元素在竖直方向上的布局
        ForEach(this.arr, (item: string) => { //遍历字符串数组
          Text(item)
            .width('90%')
            .height(100)
            .backgroundColor(Color.Brown)
            .borderRadius(15)
            .fontSize(60)
            .fontColor(Color.Yellow)
            .textAlign(TextAlign.Center)
            .margin({ top: 10 })
        })
      }.width('100%')
    }
    .backgroundColor(0xDCDCDC)
    .scrollable(ScrollDirection.Vertical) // 滚动方向纵向
    .scrollBar(BarState.On) // 滚动条常驻显示
    .scrollBarColor(Color.Gray) // 滚动条颜色
    .scrollBarWidth(10) // 滚动条宽度
    .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹
  }
}
分享
微博
QQ
微信
回复
2天前
相关问题
HarmonyOS Scroll组件滚动控制
93浏览 • 1回复 待解决
HarmonyOS Scroll组件滚动问题
626浏览 • 1回复 待解决
怎么才能让编写的工具保持活跃?
1344浏览 • 1回复 待解决
HarmonyOS Scroll组件滚动条怎么隐藏
29浏览 • 1回复 待解决
如何获取Scroll组件的当前滚动偏移量
2192浏览 • 1回复 待解决
HarmonyOS scroll滚动问题
36浏览 • 1回复 待解决
为何RichText组件内容可以滚动
2065浏览 • 1回复 待解决
HarmonyOS Scroll组件使用问题
443浏览 • 1回复 待解决
HarmonyOS scroll和list滚动冲突
435浏览 • 1回复 待解决
HarmonyOS 使用scroll组件效果异常
41浏览 • 1回复 待解决
HarmonyOS使用Web组件如何监听滚动位置
619浏览 • 2回复 待解决