使用vant List列表，点击tab切换触发onLoad事件，造成两次请求

Mtao&

已于 2024-08-15 11:09:03 修改

阅读量2.7k

点赞数

分类专栏： vant UI 文章标签： javascript 前端 vue.js

于 2022-06-07 10:56:35 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45186619/article/details/125161087

版权

UI 同时被 2 个专栏收录

2 篇文章

订阅专栏

vant

1 篇文章

订阅专栏

本文介绍了一种有效解决使用Vant List组件时，因点击Tab切换导致onLoad事件重复触发并引发多次请求的问题。通过与后端配合，在响应中包含当前页码信息，确保只有在指定条件下才更新数据列表，避免重复加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决方法实际测试有效让后端多返回一个当前请求的页码与你要请求的页码是否相等

 if (res.code == 10000) {
            console.log(res);
            if (this.page === res.data.page) {
              if (this.page === 1) {
                this.patentList = list;
              } else {
                this.patentList = [...this.patentList, ...list];
              }
              this.loading = false;
              if (Math.ceil(num / 3) === this.page) {
                this.finished = true;
              }
              this.page += 1;
            }
          }

全部代码

import _ from "lodash";
export default {
  components: {},
  name: "Brochure",
  props: ["photo"],
  data() {
    return {
      patentList: [],
      photoType: [],
      limit: 3,
      page: 1,
      type: "",
      loading: false,
      finished: false,
    };
  },
  created() {
    this.photoType = this.photo.cate;
  },
  watch: {
    type() {
      if (this.page === 1) {
        this.finished = false;
        this.patentList = [];
        this.getList();
      }
    },
  },
  methods: {
    getTitle(index, title) {
      // console.log(index, title);
      if (index === 0) {
        // console.log("当前为零");
        this.type = "";
      } else {
        this.type = title;
      }
      this.page = 1;
    },
    getList() {
      this.loading = true;
      console.log("被调用了", this.page);
      this.$util.api(
        "/app/bazaar/picture",
        {
          store_id: this.$route.query.id * 1,
          limit: this.limit,
          page: this.page,
          type: this.type,
        },
        (res) => {
          const { num, list } = res.data;
          if (res.code == 10000) {
            console.log(res);
            if (this.page === res.data.page) {
              if (this.page === 1) {
                this.patentList = list;
              } else {
                this.patentList = [...this.patentList, ...list];
              }
              this.loading = false;
              if (Math.ceil(num / 3) === this.page) {
                this.finished = true;
              }
              this.page += 1;
            }
          }
        }
      );
    },
    onLoad: _.throttle(function () {
      this.getList();
    }, 1000),
  },
};