简介
本项目是一个基于ArkTS的应用程序,基于伙伴高频使用场景,构建复杂的流畅滑动页面,滑动时不丢帧。
效果预览
工程目录
├──ets
│ ├──constants
│ │ ├──BreakpointConstants.ets // 断点相关常量
│ │ ├──CommonConstants.ets // 一般常量
│ │ └──HomeConstants.ets // 主页的常量
│ ├──entryability
│ │ └──EntryAbility.ets
│ ├──entrybackupability
│ │ └──EntryBackupAbility.ets
│ ├──model
│ │ ├──FooterTabData.ets // 底部导航栏
│ │ ├──FunctionEntryData.ets // 功能区
│ │ ├──FunctionEntryListData.ets // 功能区数据列表
│ │ ├──WaterFlowData.ets // 瀑布流数据
│ │ ├──WaterFlowDescriptionData.ets // 瀑布流item底部描述信息
│ │ ├──WaterFlowHeadData.ets // 瀑布流item媒体信息
│ │ └──WaterFlowListData.ets // 瀑布流数据列表
│ ├──pages
│ │ └──Index.ets // 滑动页面入口
│ ├──utils
│ │ ├──BreakpointSystem.ets // 一多断点监听
│ │ ├──BreakpointType.ets // 一多断点类型
│ │ ├──CollectionsCountModifier.ts // 按需更新数据
│ │ ├──Logger.ts // 日志
│ │ └──NetworkUtil.ets // 网络请求
│ └──view
│ ├──FunctionView.ets // 功能区页面
│ ├──HomeContent.ets // 主页
│ ├──IndexNavDestination.ets // 导航栏入口
│ ├──NavigationBarView.ets // 导航栏页面
│ ├──SearchBarView.ets // 搜索栏页面
│ ├──WaterFlowDescriptionView.ets // 瀑布流item底部描述页面
│ ├──WaterFlowImageView.ets // 瀑布流item图片描述页面
│ ├──WaterFlowLivingView.ets // 瀑布流item直播描述页面
│ ├──WaterFlowVideoView.ets // 瀑布流item视频描述页面
│ └──WaterFlowView.ets // 瀑布流页面
└──resources // 资源类
具体实现
- 瀑布流使用懒加载+缓存列表项的方式实现,避免了使用list作为数据源时一次性加载并渲染大量数据造成的性能瓶颈,也避免了滑动过快可能会造成的白块现象。
- 瀑布流里面的卡片都实现了组件复用,避免大量相同结构的组件频繁创建与销毁带来的性能损耗。
- 通过固定宽高比实现卡片在占位时就计算出卡片的高度,避免在组件渲染以后出现二次测量卡片高度,造成卡片跳动的情况。
使用说明
- 功能区可以左右滑动。
- 瀑布流可以下拉刷新,即将触底时分页加载数据,滑动时不丢帧。
相关权限
- 获取网络请求权限:ohos.permission.INTERNET。
- 获取网络链接状态权限:ohos.permission.GET_NETWORK_INFO。