H5列表分页删除交互优化
移动端列表分页一般都是使用的滚动无限加载的交互。当删除其中一个元素时，如何提升用户的交互体验呢？近期发现项目中收藏夹列表移除商品时，只是简单移除掉当前商品，而没有其他处理。这样，如果往下继续浏览时，就会减少部分商品的呈现。
针对上述场景，当只涉及单个元素删除的操作时，可以优化为删除后重新请求已加载页数的最新一页数据，并填充数据。基本判断逻辑为：
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
评论