仿叮咚买菜鸿蒙原生APP

DingdongShopping

这是一个原生鸿蒙版的仿叮咚买菜APP项目

鸿蒙Next发布至今已经有一年多的时间了,但有时候我们想要实现一些复杂的功能或者效果,在开发文档上查阅一些资料还是比较费时的,有可能还找不到我们想要的内容。而社会层面上分享的资料也比较有限,毕竟推出的时间相对安卓和苹果来说还是太短了,但一点也不妨碍大家学习鸿蒙的热情,因为鸿蒙生态大势已成,未来也会有更多的开发者相续分享出自己学习鸿蒙的一些技术与经验。

今天来说一说我在学习鸿蒙的时候遇到的一个小问题,在使用鸿蒙版PullToRefresh框架的时候发现当内容不满一屏时不能上拉加载更多,可能是我想要的效果特殊,在不满一屏的时候其实无需上拉。我根据源码定制了自己想要的效果,也是安卓版本的PullToRefresh用惯了,按照安卓的效果做了样式,也支持了内容不满一屏时可以上拉加载。

另外也仿着叮咚买菜搭了一个应用架子,并实现了分类页的效果,以及从上往下弹出的类似半模态转场弹框,后续有时间的时候再往里写一些其他的功能。

下面是分类页实现的效果动图:

gif1.gif

30/3.
1.新增搜索商品功能
2.分类页输入框新增热门搜索滚动组件

商品搜索功能有搜索关键字和搜索结果页两个页面,搜索关键字页面主要展示搜索记录、搜索推荐、搜索联想关键字。
搜索结果页面比较复杂一些,它涉及到了List的吸顶并与下拉刷新PullToRefresh以及瀑布流WaterFlow的嵌套滚动处理,瀑布流WaterFlow使用sections实现了单、多列布局并存的跨列布局分组效果。

基本实现了叮咚买菜苹果版app的商品搜索功能,目前他们的鸿蒙原生app的商品搜索功能还是比较粗糙的,还没有实现苹果版的效果,当然也有可能是原本就设计如此。

下面看下效果图:

img-ezgif.com-resize.gif


15/11.
新增首页效果实现

首页使用WaterFlow实现多条目列表+吸顶效果,向上滚动时搜索框宽度逐渐缩小,慢慢展示可约配送时间,重点也还是WaterFlowSections的使用。
下面是效果图:


QQ图片20251115185223.png

03/01/2026.
1首页新增引流banners、商品列表banner功能
2首页顶部、悬浮搜索框与分类页搜索框同步滚动效果实现

详情请看代码,项目地址:https://github.com/weioule/DingdongShopping

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容