饿了么左右联动问题

Question

左边一个类型对应右边10条数据
左边如果有10条
那么右边一共有100条
请问 右边是一下子请求回来的吗
还是一次10条
如果是一次10条 跳着点左边 右边是怎么计算滚动的

Answer 1

左侧的分类栏是通过获取给每个分类提前设置好的ID值，进行样式的切换。点左侧跟右侧进行联动，就需要给右边的每个盒子一个ID，让左边的ID和右边ID还有左边的点击获取当前值都相等，就可以实现左侧的联动。
右侧的联动就需要获取到每个盒子的头部距离顶部的距离，然后把他们放到一个数组里，在右侧的事件中去遍历数组，同时获取我们滚动的距离跟数组中的盒子之间的值做判断，判断我们滚动了第几个盒子的范围内，然后就把相应的数组赋给左边。

Answer 2

如果右侧是在一个盒子里面，就一次请求回来，如果是按需请求也可以，就是每次滑动的时候检测上下分类的内容是否有请求过，没有则动态请求数据并追加的滚动的数组中

Answer 3

1. 这个程度的数据，没必要多次加载，直接全部加载进来甚至缓存到本地都可以
2. 高度可以固定，方便计算
3. 图片肯定要后加载
4. 未显示的部分可以用各种级别的后渲染

Answer 4

没用过饿了，结合其它应用的类似功能说一下好了。

这个不是简单的程序问题，有营销在里面。
首先，认为第一个分类是重点、热点、促销，并假设其内容足以引起用户关注。那么基于该场景数据首次加载就是左侧列表和第一个分类下全部数据（这也是基于场景的，理论上并不会有太多）。
然后，其它分类的数据则进入低优先加载队列，如果上面的假设成立，大部分情况下所有队列都能完成加载，后续体验流畅。如果上面假设失败，用户点击的分类的详情数据读取优先读取。

然后，右边是虚拟滚动，即便右侧列表有1000个商品，实际上只有当前浏览页面前后的有限dom被渲染。所以并没有你想的那么神奇，当前浏览的商品序号/商品数 = 滚动百分比。

找个信号不好的地方试试就知道了，由于网速问题整个过程基本透明的。

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。