细解鸿蒙之元服务UX上架标准-支持滑动页面内容
是否必须遵守：涉及则必须
标准项描述：
在应用程序的运行过程中，当所展示的内容在应用窗口内无法完全呈现时，就需要通过滑动页面来浏览那些未显示的内容。这一功能确保用户能够全面查看信息，提升用户体验。
显示内容超出应用窗口
1 内容的多样性：应用窗口可能包含各种类型的内容，如文本、图像、视频、表格等。当这些内容的数量或尺寸超出窗口的大小限制时，就会出现内容无法全部显示的情况。例如，一个文档可能包含大量的文字、图片和图表，在窗口中无法完整展示。
2 空间限制：应用窗口的大小是有限的，它不能无限地容纳所有内容。即使是在较大的屏幕上，也可能存在显示空间不足的问题。例如，在手机屏幕上，应用窗口的大小相对较小，更容易出现内容超出窗口的情况。
1 滑动操作：用户可以通过鼠标、触控板或触摸屏等设备进行滑动操作。在应用窗口内，通常会出现一个滚动条，用户可以通过拖动滚动条来实现页面的滑动。例如，在电脑上，鼠标滚轮可以用来滚动页面，或者通过拖动滚动条来上下滑动页面。在手机上，用户可以通过手指在屏幕上滑动来实现页面的滚动。
2 浏览方式：滑动页面可以使内容在窗口内移动，从而展示不同部分的内容。用户可以根据需要浏览页面的不同区域，例如向上或向下滑动页面，查看页面的底部或顶部内容。此外，还可以通过左右滑动页面来查看不同的内容。例如，在一个图片库中，用户可以通过滑动页面来查看不同的图片。
3 实时显示：滑动页面的过程中，页面会实时更新显示内容。用户可以看到页面的滚动效果，以及内容的变化。例如，当用户滑动页面时，页面会自动加载新的内容，显示出未显示的部分。
滑动页面的意义
1 提高用户体验：滑动页面能够让用户方便地浏览超出窗口的内容，避免了内容的丢失和无法查看。用户可以根据自己的需求自由地浏览页面，提高了信息的获取效率。
2 适应不同设备：滑动页面适用于各种设备，无论是电脑、手机还是平板电脑。用户可以根据设备的特点和屏幕尺寸来进行滑动操作，确保在不同设备上都能正常浏览内容。
3 优化用户界面：滑动页面可以使应用界面更加简洁和美观。通过滑动页面，用户可以隐藏不必要的内容，使页面更加整洁。同时，滑动页面也可以提高页面的交互性，增强用户的操作体验。
--javascripttypescriptshellbashsqljsonhtmlcssccppjavarubypythongorustmarkdown
List
ListItem
ListItemGroup
Grid
GridItem
Scroll
Swiper
WaterFlow
FlowItem
ScrollBar
Refresh
ComposeListItem
GridObjectSortComponent
SwipeRefresher
滚动组件通用接口
// xxx.ets
// 标记为入口组件
@Entry
// 声明为组件
@Component
struct ListExample {
// 存储一个数字数组
private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
build() {
// 创建一个 Column 组件
Column() {
// 创建一个 List 组件
List({ space: 20, initialIndex: 0 }) {
// 使用 ForEach 遍历数组，为每个元素创建一个 ListItem 组件
ForEach(this.arr, (item: number) => {
ListItem() {
// 创建一个 Text 组件显示数组元素
Text('' + item)
.width('100%').height(100).fontSize(16)
.textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
}
}, (item: string) => item)
}
// 设置 List 组件的排列方向为垂直方向
.listDirection(Axis.Vertical)
// 关闭滚动条
.scrollBar(BarState.Off)
// 设置滚动摩擦系数为 0.6
.friction(0.6)
// 设置列表项之间的分界线，包括线条宽度、颜色、起始和结束边距
.divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 })
// 设置边缘效果为 Spring
.edgeEffect(EdgeEffect.Spring)
// 当滚动时，打印当前可见的第一个、最后一个和中心元素的索引
.onScrollIndex((firstIndex: number, lastIndex: number, centerIndex: number) => {
console.info('first' + firstIndex);
console.info('last' + lastIndex);
console.info('center' + centerIndex);
})
// 当可见内容发生变化时，打印开始和结束的可见信息
.onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => {
console.log(' start index: ' + start.index +
' start item group area: ' + start.itemGroupArea +
' start index in group: ' + start.itemIndexInGroup);
console.log(' end index: ' + end.index +
' end item group area: ' + end.itemGroupArea +
' end index in group: ' + end.itemIndexInGroup);
})
// 当滚动时，打印滚动状态和滚动偏移量
.onDidScroll((scrollOffset: number, scrollState: ScrollState) => {
console.info(`onScroll scrollState = ScrollState` + scrollState + `, scrollOffset = ` + scrollOffset);
})
// 设置 List 组件的宽度为 90%
.width('90%')
}
// 设置 Column 组件的宽度为 100%
.width('100%')
// 设置 Column 组件的高度为 100%
.height('100%')
// 设置 Column 组件的背景颜色
.backgroundColor(0xDCDCDC)
// 设置 Column 组件的顶部内边距为 5
.padding({ top: 5 })
}
}
PS：实际项目中如有出入，请告知博主，博主会第一时间修改得哇~
