van-list 遇到的问题

将公司项目H5页面重构的时候，有一个类似购物车的页面，需要上拉加载，下拉刷新。使用的UI组件的是vant，其中看起来van-list 很符合基本需求，就果断进行了copy 修改。但是，在进行具体的业务交互的时候突然发现，看似满足需求的组件突然不符合要求了。下拉刷新直接使用van-pull-refresh就可以整个页面进行下拉刷新请求列表数据。这个是没有问题的，主要就出在van-list 的load方法，虽然滚动到底部加载更多以及必要的提示信息配置的很齐全，每次进入页面就触发load,对于进入编辑页面进行编辑后返回不是很友好，一般都是点击列表某一项进入编辑，返回列表更新数据，展示的视口最好是之前点击的是哪里现在就是哪里。van-list load方法进行阻断和调整都不是很顺利因此果断放弃。

解决办法：

首先实现加载更多这里推荐一下收藏的博主的地址移动端上拉加载更多（vue3+vite+vant）_vue3 上拉加载更多-CSDN博客

这里封装的方法很是实用，完善过得那个没有使用明白，就单纯实用widow版本的。代码如下

javascript 复制代码

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,
    };
}

引入方式同原文启用了两个监听事件一个是判断是不是到底部一个是获取当前滚动条高度。

监听到底部事件中，做了判断，

javascript 复制代码

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;
  }
});

这样可以保证页面不会无缘无故增加请求回来空数组了也不会因为有一个请求过长就进行下一次请求了。

在点击编辑时记录当前分页和滚动条高度为了避免麻烦我进行了取整处理。页面路由守卫进行了处理只有是发现在列表页和编辑页来回跳转时不对缓存的页面信息和高度信息进行处理其他路由会移除存储的页面和高度信息。

javascript 复制代码

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);
    });
  }
});

页面加载判断这里一开始犯了个错误就是缓存的高度一回来赋值给之前记录高度的变量导致滚动高度不对，后来点击多次发现滚动直接使用缓存高度就可以。这里最重要的是使用分页请求数据，加载更多是累加的所以

javascript 复制代码

const refreshData = async () => {
  // 刷新数据时，获取所有相关页面的数据
  for (let i = 1; i <= page.value; i++) {
    await init(i);
  }
};

这样就实现了我需要的需求交互了，刚发现一个问题，滚动高度的计算在手机网页端需要减去导航栏的高度，不然上拉加载方法会失效！！！！