Antecedentes: crea una lista de datos que se puede desplegar para cargar. Debido a problemas de estilo, solo usar van-list no puede activar la carga. Usar
overflow: hidden
no tiene ningún efecto, por lo que vue- Se utiliza desplazamiento Lista de furgonetas cubiertas. Recientemente, un colega de prueba (sistema IOS) descubrió que los datos cargados después de extraerlos estaban duplicados y no podía reproducirlos en mi teléfono móvil (teléfono Android), por lo que determiné que IOS era incompatible.
1. Van-list es compatible con la carga desplegable del sistema IOS y emite múltiples solicitudes al mismo tiempo.
- establecer义
loading: false
,existvan-list
arriba:loading="loading"
- Agregar
this.loading = true
al frente del método de solicitud, una vez completada la cargathis.loading = false
<vue-scroll style="height: 335px" @handle-scroll="onScroll" v-if="itemList.length > 0 && showMore">
<van-list v-model="loading" class="scrollList" :finished="finished" :immediate-check="false">
<template #finished>
<div v-if="itemList.length == 0">暂无数据</div>
<div v-else>没有更多了</div>
</template>
·
·
·
其他无关代码
·
·
·
</van-list>
</vue-scroll>
getItemList() {
this.loading = true
this.$axios.get('xxxxxxxx', {
params: params }).then(res => {
if (res) {
·
·
·
其他无关代码
·
·
·
this.loading = false
this.canTriggerScroll = true
})
}
2. vue-scroll es compatible con la carga desplegable del sistema IOS y emite múltiples solicitudes al mismo tiempo.
- Defina una variable global
canTriggerScroll: true
y juzgue si el valor de esta variable cumple con el valor esperado y se ajusta a la configuración cada vez que se solicitan datosfalse
, etc. Retroceder después de solicitartrue
onScroll (even) {
if (!this.canTriggerScroll) {
return
}
this.canTriggerScroll = false
// 数据请求方法
this.getItemList()
}