Resumen de los problemas de carga de vue vant-list
Tire hacia arriba para lograr el efecto de carga de datos
El principio de implementación de la carga de datos en lotes es principalmente activar el evento de carga detectando si la barra de desplazamiento llega al final. Las principales variables son acabado y carga.
Nota: A veces puede haber tres razones por las que el evento @load no se puede activar: 1. La altura del contenedor principal de la lista de furgonetas está establecida en 100%; 2. Hay un problema con el control del valor terminado y de carga. 3. Después de extraer la van-list en componentes, puede extraer el cuerpo del bucle interno en componentes independientes, pero no puede extraer la van-ist juntos.
Muestra de referencia
en división
<van-list
v-model="loading"
:finished="finished"
@load="onLoad"
finished-text="没有更多了"
:immediate-check="false"> 禁止初次加载
<van-card v-for="(item,index) in dataList" :key="index" >
</>
en datos
{
dataList: [],
finished: false,
loading: false,
pageIndex: 1, // 分页
pageSize: 6, // 每页条数
total: 0, // 数据总条数
}
en métodos
getInfoTest () {
this.$http({
url: '/',
method: 'get',
params: {
'page': this.pageIndex,
'limit': this.pageSize
}
}).then(({data}) => {
if (data && data.code === 0) {
data.page.records.forEach((item,index)=>{
this.dataList.push(item) // 数据追加
})
this.totalPage = data.page.total
this.loading = false
if(this.dataList.length < this.totalPage){
this.finished = false // 数据未加载完
}else {
this.finished = true // 数据加载完
}
}
})
},
//
onLoad (){
this.pageIndex++
this.getInfoTest()
}