H5列表分页删除交互优化

前端比划

共 1129字,需浏览 3分钟

 ·

2021-03-23 10:56

移动端列表分页一般都是使用的滚动无限加载的交互。当删除其中一个元素时,如何提升用户的交互体验呢?近期发现项目中收藏夹列表移除商品时,只是简单移除掉当前商品,而没有其他处理。这样,如果往下继续浏览时,就会减少部分商品的呈现。


针对上述场景,当只涉及单个元素删除的操作时,可以优化为删除后重新请求已加载页数的最新一页数据,并填充数据。基本判断逻辑为:


1、如果已经滑动至最后一页,则直接删除无需再请求;

2、如果才浏览第一页,删除后直接刷新第一页数据

3、请求已加载的最新一页数据,判断接口返回的最后一项数据与已有数据最后一项是否不一致,不一致则渲染最后一项,并更新已有数据

// page为当前已加载数据的最大页码// products为本地保存的已加载数据, goods为接口返回的数据if (this.queryParams.page < 2) {      this.products = goods} else {      const lastItem = goods[goods.length - 1]      if (lastItem && lastItem.goodsId !== this.products[this.products.length - 1].goodsId) {          this.products.push(lastItem)      }}


......


1、用户可能会安装广告拦截插件,也是近期发现有个域名被插件标记为第三方脚本域,加入黑名单被拦截了。如此,测试人员应该尽可能关注用户可能的真实使用环境,比如隐身模式、深色模式等


2、懒加载插件,针对如vue模板html处理,选择器也应该通过数据绑定方式输出,如 :class=“‘js-lazy’”。当初始化懒加载元素时,如果选择器已匹配了元素,而因为图片地址还没设置,从而造成首次呈现时懒加载图片失效的情况。


顺带附上这款插件地址,主要也是使用了IntersectionObserver API。

https://github.com/verlok/vanilla-lazyload


浏览 46
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报