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>