vue-scroll, van-list Problema de solicitud repetida del teléfono móvil de Apple

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-listarriba:loading="loading"
  • Agregarthis.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 globalcanTriggerScroll: 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()
}

Guess you like

Origin blog.csdn.net/weixin_46099269/article/details/131447243