HarmonyOS 鸿蒙Next Scroll容器无法滚动到最下面

HarmonyOS 鸿蒙Next Scroll容器无法滚动到最下面

这是第一个页面

import { router, Router } from '@kit.ArkUI'
import DingBuQuYu from './DingBuQuYu'
import XuanZeQu from './XuanZeQu'
import XunLianZPPage from './xuanzequ/KeChengZP/MuBiao/XunLianZPPage'

@Entry
@Component
struct KeChengPage {
  build() {
    Column(){
      //顶部区域
      DingBuQuYu()

      //选择区域
      XuanZeQu()

      //下半课程部分
      Column(){
      Scroll() {
        XunLianZPPage()
      }
      .scrollable(ScrollDirection.Vertical)//设置滚动方向
      .scrollBar(BarState.Off)//滚动条隐藏
      .edgeEffect(EdgeEffect.Spring)//滑动动画
      .width('100%')
      .height('100%')
      }
      .width('100%')
      .height('100%')
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Orange)
  }
}

这是第二个页面代码

@Entry
@Component
export default struct XunLianZPPage {
  build() {
      Column({ space: 15 }) {
        ForEach(Array.from({ length: 13 }), (item: string, index) => {
          Row({ space: 15 }) {
            Image($r('app.media.jirou'))
              .width(180)
              .height(150)
              .borderRadius(20)
              .margin({ left: 2 })
            Column({ space: 20 }) {
              Text('练习肌肉测试标题')
                .fontWeight(900)
              Text('部位 · 时间')
                .fontColor('#878282')
            }
          }
        })
      }
      .width('100%')
  }
}

这里时最后一个但无法往下滚动完全显示，总是会回去


更多关于HarmonyOS 鸿蒙Next Scroll容器无法滚动到最下面的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

这个scroll的问题好像一直都存在，这个很蛋疼的，要在内部加padding让他顶上去，但是横屏的时候又不好看。

更多关于HarmonyOS 鸿蒙Next Scroll容器无法滚动到最下面的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


啥？这个是因为高度写了100%，而这个样100%计算后屏幕的高度。但是Scroll 和top并没有跟屏幕的Top一致，而是被标题和Tab挤下来了，所以滑不下来。

懂了，

基本信息

深色代码主题

@Entry @Component struct KeChengPage { build() { Column() { //顶部区域 Row() { Text(“顶部”) }.height(‘40’)

  //选择区域
  Column() {
    Text("选择")
  }.height('40')

  //下半课程部分
  Column() {
    Scroll() {
      XunLianZPPage()
    }
    .scrollable(ScrollDirection.Vertical) //设置滚动方向
    .scrollBar(BarState.Off) //滚动条隐藏
    .edgeEffect(EdgeEffect.Spring) //滑动动画
    .width('100%')
    .height('100%')
  }
  .width('100%')
  .layoutWeight(1)
}
.width('100%')
.height('100%')
.backgroundColor(Color.Orange)

} }

@Component export struct XunLianZPPage { build() { Column({ space: 15 }) { ForEach(Array.from({ length: 13 }), (item: string, index) => { Row({ space: 15 }) { Column() .width(180) .height(150) .borderRadius(20) .margin({ left: 2 }) Column({ space: 20 }) { Text(‘练习肌肉测试标题’ + index) .fontWeight(900) Text(‘部位 · 时间’) .fontColor(’#878282’) } } }) } .width(‘100%’) } }

把包括的内容的高度，设置成layoutWeight(1)，

姓名: 张三
职位: 软件工程师
简介: 拥有超过10年的软件开发经验，擅长Java和Python编程。

针对HarmonyOS（鸿蒙）中Next Scroll容器无法滚动到最下面的问题，这通常是由于内容布局、滚动区域设置或事件处理不当导致的。以下是一些可能的原因及解决方法：

  1. 内容高度不足：检查Scroll容器内的子元素总高度是否确实超过了Scroll容器本身的高度。如果内容高度不够，Scroll容器自然无法滚动到底部。

  2. 滚动区域限制：确认Scroll容器的滚动区域设置是否正确，包括是否设置了合适的滚动边界。有时错误的边界设置会限制滚动范围。

  3. 事件拦截：检查是否有其他UI组件或布局拦截了滚动事件。在鸿蒙系统中，事件分发机制可能导致滚动事件被意外处理或忽略。

  4. 动画或状态影响：如果Scroll容器内有动画或状态变化影响了布局，确保这些变化不会干扰滚动的正常进行。

  5. 版本兼容性：确认你使用的鸿蒙系统版本与Scroll容器的实现是否兼容。有时新版本的系统会对组件行为做出调整。

如果以上方法均未能解决问题，可能是特定场景下的bug或未预见的交互问题。此时，建议直接联系鸿蒙系统的官方技术支持以获取更专业的帮助。如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html，

回到顶部