vps做网站怎么加速,黄骅做网站的电话,什么是网络营销美好小火锅的线上推广平台有哪些,成都商报官方网站将公司项目H5页面重构的时候#xff0c;有一个类似购物车的页面#xff0c;需要上拉加载#xff0c;下拉刷新。使用的UI组件的是vant#xff0c;其中看起来van-list 很符合基本需求#xff0c;就果断进行了copy 修改。但是#xff0c;在进行具体的业务交互的时候突然发现…将公司项目H5页面重构的时候有一个类似购物车的页面需要上拉加载下拉刷新。使用的UI组件的是vant其中看起来van-list 很符合基本需求就果断进行了copy 修改。但是在进行具体的业务交互的时候突然发现看似满足需求的组件突然不符合要求了。下拉刷新直接使用van-pull-refresh就可以整个页面进行下拉刷新请求列表数据。这个是没有问题的主要就出在van-list 的load方法虽然滚动到底部加载更多以及必要的提示信息配置的很齐全每次进入页面就触发load,对于进入编辑页面进行编辑后返回不是很友好一般都是点击列表某一项进入编辑返回列表更新数据展示的视口最好是之前点击的是哪里现在就是哪里。van-list load方法进行阻断和调整都不是很顺利因此果断放弃。
解决办法
首先实现加载更多这里推荐一下收藏的博主的地址 移动端上拉加载更多vue3vitevant_vue3 上拉加载更多-CSDN博客
这里封装的方法很是实用完善过得那个没有使用明白就单纯实用widow版本的。代码如下
import { onMounted, onUnmounted, ref } from vue;export default function () {//页面是否滑动到最底部const isReachBottom ref(false);//窗口滚动的距离const scrollTop ref(0);//窗口可滚动的高度const scrollHeight ref(0);// 监听窗口的滚动const scrollListener () {const clientHeight document.documentElement.clientHeight;scrollTop.value Math.floor(document.documentElement.scrollTop)scrollHeight.value document.documentElement.scrollHeight;//窗口可滚动的高度 窗口滚动的距离页面窗口的位置if (scrollHeight.value scrollTop.value clientHeight 1) {isReachBottom.value true;}};//页面挂载添加监听onMounted(() {window.addEventListener(scroll, scrollListener);});// 离开页面取消监听onUnmounted(() {window.removeEventListener(scroll, scrollListener);});return {isReachBottom,scrollTop,scrollHeight,};
}
引入方式同原文 启用了两个监听事件 一个是判断是不是到底部 一个是获取当前滚动条高度。
监听到底部事件中做了判断
watch(isReachBottom, (newVal) {if (newVal) {if (list.value.length 0 list.value.length total.value) {showToast(已经没有更多了);return false;}list.value.length total.value !loading.value (page.value 1);list.value.length total.value !loading.value init(page.value);isReachBottom.value false;}
});
这样可以保证页面不会无缘无故增加请求回来空数组了 也不会因为有一个请求过长就进行下一次请求了。
在点击编辑时记录当前分页和滚动条高度为了避免麻烦我进行了取整处理。页面路由守卫进行了处理只有是发现在列表页和编辑页来回跳转时不对缓存的页面信息和高度信息进行处理 其他路由会移除存储的页面和高度信息。
onMounted(async () {const cachData tool.data.get(cachData);if (!cachData) {init(1);} else {page.value cachData.page;await refreshData();await nextTick(() {window.scrollTo(0, cachData.height);});}
});
页面加载判断这里一开始犯了个错误就是缓存的高度一回来赋值给之前记录高度的变量导致滚动高度不对后来点击多次发现滚动直接使用缓存高度就可以。这里最重要的是使用分页请求数据加载更多是累加的所以
const refreshData async () {// 刷新数据时获取所有相关页面的数据for (let i 1; i page.value; i) {await init(i);}
};
这样就实现了我需要的需求交互了刚发现一个问题滚动高度的计算在手机网页端需要减去导航栏的高度不然上拉加载方法会失效
