H5列表分頁刪除交互優(yōu)化
移動端列表分頁一般都是使用的滾動無限加載的交互。當(dāng)刪除其中一個元素時，如何提升用戶的交互體驗(yàn)?zāi)兀拷诎l(fā)現(xiàn)項(xiàng)目中收藏夾列表移除商品時，只是簡單移除掉當(dāng)前商品，而沒有其他處理。這樣，如果往下繼續(xù)瀏覽時，就會減少部分商品的呈現(xiàn)。
針對上述場景，當(dāng)只涉及單個元素刪除的操作時，可以優(yōu)化為刪除后重新請求已加載頁數(shù)的最新一頁數(shù)據(jù)，并填充數(shù)據(jù)?；九袛噙壿嫗椋?/span>
1、如果已經(jīng)滑動至最后一頁，則直接刪除無需再請求；
2、如果才瀏覽第一頁，刪除后直接刷新第一頁數(shù)據(jù)
3、請求已加載的最新一頁數(shù)據(jù)，判斷接口返回的最后一項(xiàng)數(shù)據(jù)與已有數(shù)據(jù)最后一項(xiàng)是否不一致，不一致則渲染最后一項(xiàng)，并更新已有數(shù)據(jù)。
// page為當(dāng)前已加載數(shù)據(jù)的最大頁碼// products為本地保存的已加載數(shù)據(jù)， goods為接口返回的數(shù)據(jù)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、用戶可能會安裝廣告攔截插件，也是近期發(fā)現(xiàn)有個域名被插件標(biāo)記為第三方腳本域，加入黑名單被攔截了。如此，測試人員應(yīng)該盡可能關(guān)注用戶可能的真實(shí)使用環(huán)境，比如隱身模式、深色模式等
2、懶加載插件，針對如vue模板html處理，選擇器也應(yīng)該通過數(shù)據(jù)綁定方式輸出，如 :class=“‘js-lazy’”。當(dāng)初始化懶加載元素時，如果選擇器已匹配了元素，而因?yàn)閳D片地址還沒設(shè)置，從而造成首次呈現(xiàn)時懶加載圖片失效的情況。
順帶附上這款插件地址，主要也是使用了IntersectionObserver API。
https://github.com/verlok/vanilla-lazyload