[HarmonyOS Next示例代码] 鸿蒙--基于原生组件实现新闻类首页流畅体验

本文链接：https://blog.csdn.net/qq_23068089/article/details/141287123

鸿蒙--基于原生组件实现新闻类首页流畅体验源码下载地址

介绍

本场景解决方案主要面向于新闻类页面开发人员，指导开发者从零开始构建一个新闻类的首页面，包含地址选择、tabs和tabContent切换的动态图标和流畅动效、下拉刷新上拉加载、首页feed流等常见功能，及功能的流畅体验。

效果预览

效果图

使用说明

获取地理位置的权限；
点击位置信息，跳转地址页，可修改当前位置信息；
点击顶部页签或者滑动切换页面，页签同步切换；
点击底部页签切换页面，同步切换页签，触发页签切换的动画效果；
下拉刷新页面信息；
上拉加载页面信息；
点击右下角按钮回弹至顶部。

工程目录

├──entry/src/main/ets/
│  ├──common
│  │  └──lottie                    // 动画
│  ├──constants
│  │  ├──BreakpointConstants.ets   // 断点常量
│  │  ├──CommonConstants.ets       // 常用常量
│  │  └──HomeConstants.ets         // 主页常量
│  ├──entryability
│  │  └──EntryAbility.ets          // Ability的生命周期回调内容
│  ├──pages
│  │  ├──CitySearch.ets            // 城市查询
│  │  └──Index.ets                 // 首页
│  ├──util                  
│  │  ├──BreakpointType.ets        // 断点类型
│  │  └──ResourceUtil.ets          // 路由数据
│  ├──view                  
│  │  ├──CityView.ets              // 城市列表组件
│  │  ├──Home.ets                  // 主页组件
│  │  ├──HomeContent.ets           // tab内容组件
│  │  ├──HomeHeader.ets            // 主页头部组件
│  │  ├──NewsChannel.ets           // 新闻渠道组件
│  │  ├──PullToRefreshNews.ets     // 拉取刷新新闻组件
│  │  ├──SearchView.ets            // 搜索组件
│  │  └──TabBar.ets                // 标签栏组件
│  └──viewmodel                  
│     ├──CityDetailData.ets        // 城市详细数据
│     ├──NewsData.ets              // 新闻数据
│     ├──NewsDataSource.ets        // 新闻数据源
│     ├──NewsTypeModel.ets         // 新闻类型模型
│     └──NewsViewModel.ets         // 新闻视图模型
└──entry/src/main/resources        // 应用静态资源目录