【vant】van-list的滚动加载onload事件

1.van-list的滚动加载onload事件：onload莫名执行多次或者一直加载到所有数据。
2.官方说了，不能使用float和overflow。包括父级元素和html和body都不要用这些触发BFC的属性
3.滑动到底部会触发该事件（一定要注意父级标签，甚至 html 和 body 标签都不能设置overflow，第一次加载一定要保证数据能撑出这个页面（多加载几条或者没调高度设置高点））
4.:immediate-check=“false” 阻止默认就加载 改为在created里再加载首次

以下代码可直接复制

<template>
  <div class="order-sure">

    <div class="search_box">
      <form action="/">
        <van-search label="投保人" v-model="searchObj.applicantName" show-action placeholder="请输入投保人" @blur="onSearch1" @clear="onCancel1" @cancel="onCancel1" />
      </form>
    </div>

    <!-- // 滑动到底部会触发该事件（一定要注意父级标签，甚至 html 和 body 标签都不能设置overflow，第一次加载一定要保证数据能撑出这个页面（多加载几条或者没调高度设置高点）） -->
    <!-- :immediate-check="false" 阻止默认就加载 改为在created里再加载首次 -->
    <van-list class="van-list" v-model="loading" :finished="finished" finished-text="没有更多了" :immediate-check="false" @load="onLoad">
      <div v-for="(item,index) in list" :key="index" class="div_box">
        <div class="div_1">
          <span class="s1">投保人:{{index}}</span>
          <span class="s2">{{item.applicantName}}</span>
        </div>
      </div>
    </van-list>

  </div>
</template>

<script>

import { Toast } from 'vant'


export default {
  name: 'order-sure',
  data () {
    return {
      searchObj: {
        applicantName: '',
        licenseNo: '',
        pageIndex: 1,
        pageSize: 10,
      },
      value: '',
      total: 0,

      list: [],
      loading: false,
      finished: false,

    }
  },
  created () {
    this.searchObj.pageIndex = 1
    this.searchObj.pageSize = 10
    this.list = []
    this.onLoad()
  },
  methods: {
    onSearch1 (e) {
      console.log(e)
      // Toast(e.target.value)
      this.resetPage()
    },
    onCancel1 () {
      Toast('取消')
      this.resetPage()
    },
    resetPage () {
      this.searchObj.pageIndex = 1
      this.searchObj.pageSize = 10
      this.list = []
      this.finished = false
      this.onLoad()
    },

    // 滑动到底部会触发该事件（一定要注意父级标签，甚至 html 和 body 标签都不能设置overflow，第一次加载一定要保证数据能撑出这个页面（多加载几条或者没调高度设置高点））
    onLoad () {
      console.log('onLoad')
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {

        // 真正调用接口 ---- 1 （打开此注释时候 关闭2部分逻辑）
        // PayPost(G_CGI_PHP.invoiceApi.mobileInvoicePolicyList, this.searchObj).then((res) => {
        //   if (res.success) {
        //     this.total = res.data.total
        //     this.list = [...this.list, ...res.data.list]
        //   } else {
        //     Toast(res.return_message)
        //   }
        //   // 加载状态结束
        //   this.loading = false
        // })

        // 模拟调接口数据  ----- 2
        for (let i = 0; i < 10; i++) {
          this.list.push({
            applicantName: 'applicantName',
            licenseNo: 'licenseNo',
            createdTime: 'createdTime',
          })
        }
        // 加载状态结束
        this.loading = false
        this.total = 43





        // 数据全部加载完成（就将finished设置为true 这样滑动到底部也不会触发加载onload事件） --- 3 需要保留的部分
        console.log(this.list.length >= this.total)
        if (this.list.length >= this.total) {
          this.finished = true
        } else {
          this.searchObj.pageIndex++
        }
      }, 500)
    },

  }

}
</script>
<style lang="less" scoped>
.order-sure {
  margin: 0 6px;

  .search_box {
    margin-top: 0.5rem;
  }
  .van-list {
    overflow: hidden;
  }
  .div_box {
    overflow: hidden;
    padding: 0.2333rem 0;
    box-sizing: border-box;

    height: 2.5rem;
    border-bottom: 1px solid #ddd;

    .div_1 {
      margin-top: 0.4rem;
    }

    span {
      font-size: 0.32rem;
    }

    .s1 {
      font-weight: 600;
    }
    .s2 {
      color: rgb(51, 50, 50);
    }
  }
  .div_box:first-child {
    border-top: 1px solid #ddd;
  }
}
</style>