在移动端中,很多场景中都会有商品列表的页面,并且这些页面一般都会使用下拉加载不断地添加商品。当用户点进其中一个商品浏览时,然后回退到商品列表页时,为了让用户有种“逛”的感受,我们会把页面内容滚动到用户点击商品前的位置。
那么当用户下拉加载了好几页的商品数据,这时候我们难道要向后台请求之前所有分页的数据吗,如果这样的话,假设用户下拉加载了几十页的商品数据,难道要等到这几十个分页数据请求都反馈后再进行滚动吗?这显然是不切实际的。
闲来无事看了一下京东微信购物的实现。首页推荐商品列表中,每一组分页的JSON数据都会在localStorage中存储,比如第一页分页的JSON数据的key为WQ_indexv5recommend1。每当下拉加载一组分页的数据时,同样地将数据存储在localStorage中,key为WQ_indexv5recommend+一个数字代表页数。这样,当用户点击一个商品进行浏览,然后回退时,将WQ_indexv5recommend组的数据全部取出进行渲染,渲染后再设置scrollTop值即可。