解决van-list分页太小首次加载两次的问题

问题描述

使用van-list分页，下拉翻页时，页面大小为5，初次加载页面，就会直接发送2次请求，直接请求了页码1，2两个页面

解决方案

设置页面加载不立即检查是否翻页。页面创建执行van-list的onload方法
代码如下：

<van-list v-model="loading" :finished="finished" @load="onLoad" @refresh="onRefresh" :offset='50' :immediate-check="cheack">
        <div v-for="(item,index) in lists" :key="index" class="item">
          <a :href="item.url+'?activityId='+item.id+'&userId='+$route.query.userId">
            <div class="img_container">
              <img :src="item.image" alt />
            </div>
            <div class="text">
              <p class="name">{{item.name}}</p>
              <p class="time">
                <img src="../assets/calander.png" alt style="width:0.347rem;vertical-align:middle" />
                {{item.startTime}} 至 {{item.endTime}}
              </p>
            </div>
          </a>
        </div>
      </van-list>

export default {
  data() {
    return {
      lists: [],
      page:1,
      loading: false,
      finished: false,
      cheack:false,
    };
  },
  
  created() {
    this.onLoad();
  },
  methods: {
 	    getList() {
  	    this.$http.get("/activity/MallActivityList",{
          params:{
            userId:this.$route.query.userId,
            page:this.page,
            size:5
          }
        }).then((res) => {
          var data = res.data;
          if (this.page == 1) {
            this.lists = data.data;
          } else {
            this.lists = this.lists.concat(data.data)
          }

          this.loading = false;
          this.page++;

          if (data.data.length == 0 || data.data == null || data.data.length < 5) {
            this.finished = true
            return
          }
        });
    },
    onLoad(){
      this.getList();
    },
    onRefresh() {
      this.finished = false;
      this.loading = true;
      this.onLoad();
    },
  },