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
评论