仿美团外卖的店铺列表获取思路

  • A+
所属分类:Web前端
摘要

这一篇随笔主要用来讲解和记录我对一个问题的解决思路。首先我来讲解下遇到的问题,在开发一个外卖uni-app的过程中,我碰到了一个问题,店铺页面商品实现懒加载和列表动态切换,实现和美团,饿了么一样的效果,并在这个基础上给予动态效果,大致设计如下图:

这一篇随笔主要用来讲解和记录我对一个问题的解决思路。

首先我来讲解下遇到的问题,在开发一个外卖uni-app的过程中,我碰到了一个问题,店铺页面商品实现懒加载和列表动态切换,实现和美团,饿了么一样的效果,并在这个基础上给予动态效果,大致设计如下图:

仿美团外卖的店铺列表获取思路

 

 在做这个页面功能的时候,我首先是要解左侧列表框和右侧产品框的协调问题,下面分享我的思路,

左侧列表框思路:

初始:在初始化接口时,需要后台把所有的左侧列表数据和店铺数据返回出来给我,我这里做一个数据的初始化,定义一个全局变量,初始值为0,定义一个暂存数据arr,初始值为【】。

处理:在初始化结束后,显示数据。

右侧处理完后:全局获取view标签的上边距,标给左侧栏的一个值(top),如果没有获取到view的,代表还未获取,赋值为0

点击时:判断这一列的top是否为0,如果是,根据右侧列表初始化的思路再去拿20个,拿完后执行上方步骤,完成后再判断,直到有top,赋值有右侧来进行动态滑动

右侧滑动时

右侧列表框思路:

初始化:在左侧列表框获取结束后,全局定义的变量为0,我以这个为下标,可以拿到第一列列表的id,根据这个id去后台获取商品,商品返回后判断是否够20个,如果够,就进行数据处理,如果不够,全局下标+1,数据暂存到全局暂存arr中,继续范围后台去拿下一个列表的商品,直到够20个或获取到全部列表的商品为止。

数据处理:根据返回的数据,循环后可以找到是哪个下标的商品,直接添加到左侧列表的数据中,显示出来。

滑动时:这里滑动时有一个误区,滑动时判断外层的滑动位置,再与右侧进行比对,当值大于前一个小于下一个时,判断为前一个标签的下标,给予左侧效果。

滑动到底部时:判断全局下标是否为最后一列,没有的话根据初始化的思路来拿下20个,处理后显示出来。

这一套思路完成后,你的页面效果可以和基本和美团,饿了么一样,如果对你有什么帮助,请点个推荐,谢谢。