个人主页→VON
收录专栏→鸿蒙开发小型案例总结
基础语法部分会发布于github 和 gitee上面（暂未发布）
前言
该实战案例并没有用到太多的知识点，只不过用到的一些新东西，要多花时间去熟悉手机app的一些页面，对开发很有帮助。
构建思路
主体部分由五张图片所构成
滑动一定距离后
界面讲解
布局
Scroll的应用
返回顶部
知识点概述
Scroll组件是鸿蒙应用开发中的一个重要元素，用于在布局尺寸超过父组件尺寸时提供滚动功能。Scroll组件作为鸿蒙OS开发中的一个重要组成部分，主要负责处理内容显示中的滚动需求。当一个容器的内容或者子组件超出了容器的可视范围时，Scroll组件就发挥其作用，使得内容能够通过滚动的方式被用户访问到。
从Scroll组件的功能性来看。Scroll组件的设计初衷是为了解决内容展示空间有限的问题。当内容的布局尺寸超过其父组件尺寸时，Scroll组件便提供了滚动的能力，使得用户可以在有限的窗口中浏览更多的信息。这种机制广泛应用于移动应用中的长列表、横向图集等场景。
Scroll组件支持的滚动方向和自定义属性也是开发者需要关注的点。根据文档，Scroll组件可以通过scrollable属性设置滚动方向，包括水平滚动（Horizontal）、竖直滚动（Vertical）以及不可滚动（None）。除了滚动方向，Scroll组件还提供了诸如scrollBar、scrollBarColor、scrollBarWidth等属性，允许开发者对滚动条的显示状态、颜色及宽度进行个性化定制。
Scroll组件与滚动控制器Scroller的结合使用，为开发者提供了更为灵活的滚动控制能力。通过Scroller，开发者可以实现将滚动容器定位到特定位置、滚动到边界等操作。例如，scrollTo方法允许开发者设置滚动容器快速定位到指定的位置，而scrollPage方法则能够实现按页滚动的功能。这些方法和属性的结合使用，大大增强了滚动组件的功能性和交互性。
Scroll组件的高级应用也体现了鸿蒙开发框架的强大之处。例如，通过设置scrollSnap属性，可以实现限位滚动，即在滚动过程中，内容会根据设定的点对齐，适用于轮播图或者分页内容的场景。此外，嵌套滚动选项nestedScroll能够让Scroll组件与其他滚动组件（如List）结合，实现更为复杂的滚动联动效果。
Scroll组件不仅为鸿蒙应用的内容展示提供了基础的滚动功能，同时通过丰富的属性和方法，为开发者提供了高度定制化和动态控制的能力。在应用开发过程中，合理利用Scroll组件及其相关特性，将有助于实现更流畅的用户交互体验和更高效的信息展示。因此，深入理解和灵活运用Scroll组件，对于追求卓越用户体验的鸿蒙应用开发者来说，是一项不可或缺的技能。
代码展示
@Entry
@Component
struct Index {
// 1.创建Scroll实例对象
myScroll:Scroller=new Scroller()
num:number[]=[2,3,4,5]
// 实时保存y轴滚动的距离
@State yoffset:number=0
build() {
Column(){
// 层叠布局
Stack({alignContent:Alignment.BottomEnd}){
// 滚动区域
// 2.和Scroller容器绑定
Scroll(this.myScroll){
Column(){
ForEach(this.num,(item:number)=>{
Image($r(`app.media.pdd_img0${item}`))
.width('100%')
})
}
}
.onScroll(()=>{
this.yoffset=this.myScroll.currentOffset().yOffset
})
if(this.yoffset>200){
// 返回顶部
Column(){
Image($r('app.media.ic_top'))
.width(50)
Text('返回顶部')
.fontSize(12)
}
.backgroundColor(Color.White)
// 3.调用实例方法
.onClick(()=>{
this.myScroll.scrollEdge(Edge.Top)
})
.position({x:'85%',y:'80%'})
}
// 底部区域
Image($r('app.media.pdd_img01'))
.width('100%')
}
}
}
}
