vue做移动端上拉加载 删除当前列表某个数据 保持当前状态 继续获取下一页不影响正常的数据

本文中使用vant组件的list列表制作的 当然主要是看这个难题的思路 不必计较用的什么组件库 换做其他的组件库 思路还是一样的

//主要思路是把点击删除的数据让后端置为false
// 比如我请求了3页，一页10条数据
// 一共30条，我一条一条删除，点击删除之后调用后端删除接口，
// 但是不能调用刷新接口，不然我请求的3页数据就会重置到第一页，
// 我可以把每次分页请求的数据保存在前端data的数组里，调用后端删除接口后，这样进行删除前端的列表实现视觉效果，这样列表的状态还在第三页
// 问题，当我删除了25条数据，我再次上拉加载获取更多的数据的时候，
// 传输的页数应该是第4页了吗？还是第一页，？？ 所以问题变得复杂 我们为了不影响数据 可以前端删除调用接口 后端不进行删除 而是给个状态置为false
// 这样前端不会影响页数的数据 直接v-if判断是true就进行显示 否则隐藏
// 如果后端真的想要删除 我们可以退出来当前的列表页 或者在其他界面 或者进行刷新的时候(刷新肯定会置为第一页的) 调用一个接口告诉
// 后端 你可以进行删除状态是false的数据了

<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <template v-for="(item, index) in list">
        <template v-if="item.change">
          <div style="display: flex; align-items: center; height: 130px">
            <van-cell :key="item.id" :title="`${item.name}${item.id}`" />
            <div style="width: 50px" @click="deleteItem(item.id)">删除</div>
          </div>
        </template>
      </template>
    </van-list>
  </div>
</template>
<script>
</script>
<script>
export default {
  //主要思路是把点击删除的数据让后端置为false
  //     比如我请求了3页，一页10条数据
  // 一共30条，我一条一条删除，点击删除之后调用后端删除接口，
  // 但是不能调用刷新接口，不然我请求的3页数据就会重置到第一页，
  // 我可以把每次分页请求的数据保存在data的数组里，这样进行删除，这样列表的状态还在第三页
  // 问题，当我删除了25条数据，我再次上拉加载获取更多的数据的时候，
  // 传输的页数应该是第4页了吗？ 所以问题变得复杂  我们为了不影响数据 可以前端删除调用接口 后端不进行删除 而是给个状态置为false
  //   这样前端不会影响页数的数据  直接v-if判断是true就进行显示 否则隐藏
  // 如果后端真的想要删除  我们可以退出来当前的列表页 或者在其他界面 或者进行刷新的时候(刷新肯定会置为第一页的) 调用一个接口告诉
  // 后端 你可以进行删除状态是false的数据了
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      pageCurrent: 1,
      pageSize: 10,
      count: "",
      //模拟后端存放的数据
      addlist: [
        { id: 1, name: "list ", change: true },
        { id: 2, name: "list ", change: true },
        { id: 3, name: "list ", change: true },
        { id: 4, name: "list ", change: true },
        { id: 5, name: "list ", change: true },
        { id: 6, name: "list ", change: true },
        { id: 7, name: "list ", change: true },
        { id: 8, name: "list ", change: true },
        { id: 9, name: "list ", change: true },
        { id: 10, name: "list ", change: true },
        { id: 11, name: "list ", change: true },
        { id: 12, name: "list ", change: true },
        { id: 13, name: "list ", change: true },
        { id: 14, name: "list ", change: true },
        { id: 15, name: "list ", change: true },
        { id: 16, name: "list ", change: true },
        { id: 17, name: "list ", change: true },
        { id: 18, name: "list ", change: true },
        { id: 19, name: "list ", change: true },
        { id: 20, name: "list ", change: true },
        { id: 21, name: "list ", change: true },
        { id: 22, name: "list ", change: true },
        { id: 23, name: "list ", change: true },
      ],
    };
  },
  methods: {
    changePageData(pageCurrent, pageSize) {
      const data = this.addlist;
      //   获取时时的真实条数;
      const changlength = data.filter((item, index, arr) => {
        return item.change == true;
      });

      const newdata = data.slice(
        (pageCurrent - 1) * pageSize,
        pageCurrent * pageSize
      );

      return { list: newdata, count: changlength.length };
    },
    deleteByid(id) {
      this.addlist.forEach((item, index, arr) => {
        item.id == id ? (this.list.change = false) : "";
      });
    },

    onLoad() {
      setTimeout(() => {
        const data = this.changePageData(this.pageCurrent, this.pageSize);
        console.log(data);
        if (data.list.length < this.pageSize) {
          this.list.push(...data.list);
          this.finished = true;
        } else {
          this.list.push(...data.list);
          this.count = data.count;
          this.pageCurrent += 1;
          // 加载状态结束
          this.loading = false;
          // 数据全部加载完成
          if (this.list.length >= this.count) {
            this.finished = true;
          }
        }
      }, 1000);
    },
    deleteItem(id) {
      this.list.forEach((item, index, arr) => {
        item.id == id ? this.list.splice(index, 1) : "";
      });
      this.deleteByid(id);
      // 有时候会删除数据不足会自动请求   有时候不会自动请求就手动请求
      //   如果后端没数据了 就别在请求onLoad
      //这里的3是屏幕上只显示3条数据的时候 你可以设置自己一屏占满的是多少条数据
      if (this.list.length <= 3 && this.list.length <= this.count) {
        if (!this.finished) {
          this.onLoad();
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
</style>