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 = 1this.searchObj.pageSize = 10this.list = []this.onLoad()},methods: {onSearch1 (e) {console.log(e)// Toast(e.target.value)this.resetPage()},onCancel1 () {Toast('取消')this.resetPage()},resetPage () {this.searchObj.pageIndex = 1this.searchObj.pageSize = 10this.list = []this.finished = falsethis.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// })// 模拟调接口数据  ----- 2for (let i = 0; i < 10; i++) {this.list.push({applicantName: 'applicantName',licenseNo: 'licenseNo',createdTime: 'createdTime',})}// 加载状态结束this.loading = falsethis.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>