Vux: Le scroller ne peut pas s'actualiser correctement

Créé le 18 avr. 2016 · 4Commentaires · Source: airyland/vux

Version 0.0.105

PC chromé

Reproduire

Déroulez le scroller et tirez-le rapidement avant que le pulldown:reset ne soit terminé , la barre de défilement ne peut pas être actualisée correctement.

<scroller
  v-ref:scroller
  lock-x scrollbar-y
  use-pulldown
  :pulldown-config={...}
  <strong i="10">@pulldown</strong>:loading="load">
  <div>
    <div v-for="item in list">...</div>
  </div>
</scroller>

load(uuid){
  this.$http.get(...)
    .then(({data:{list}}})=>{
      this.list = list
        this.$nextTick(()=>{
          this.$broadcast('pulldown:reset',uuid)
        })
      }
    })
}

De plus, après avoir poussé manuellement les données vers la liste, y a-t-il un moyen de rafraîchir la barre de défilement ? La méthode actuelle consiste à appeler scroller._xscroll.render(), ce qui n'est pas très bon.

to be repro

Source

varHarrie

Commentaire le plus utile

Il est préférable de réserver la hauteur de l'image et il est difficile de réinitialiser plusieurs images plusieurs fois.
Maintenant que l'événement scroller:reset a été ajouté, vous pouvez également obtenir la référence du composant pour appeler la méthode reset.

airyland le 21 avr. 2016

👍2

Tous les 4 commentaires

"Déroulez le scroller et tirez rapidement vers le haut avant que le pulldown:reset ne soit terminé , la barre de défilement ne peut pas être rafraîchie correctement" Je ne peux pas reproduire cette opération. Peut-être que je ne comprends pas bien ?

L'actualisation active n'est vraiment pas une solution élégante. Si vous ajoutez directement une méthode de rendu au scroller, ajoutez ref au scroller lors de l'appel, puis appelez la méthode de rendu.

airyland le 20 avr. 2016

gif
Lorsque vous tirez vers le bas pour actualiser, balayez rapidement vers le haut. Une fois les données chargées, la barre de défilement ne s'actualise pas.

Pulldown:reset et pullup :reset ne sont appelés que pendant l'opération d'actualisation pull-down ou pull-up. Ajoutez un événement scroller:reset pour l'actualisation active . Est-ce approprié ? Particulièrement adapté aux scrollers qui n'ont pas de pulldown ou pullup.

Il y a aussi le problème du chargement de l'image. Une fois l'image chargée, le scroller ne peut pas rafraîchir la barre de défilement en fonction de la hauteur de l'image. Il doit également rafraîchir manuellement ou réserver la hauteur de l'image.

varHarrie le 21 avr. 2016

airyland le 21 avr. 2016

👍2

Plusieurs images peuvent être utilisées pour surveiller le chargement de toutes les images, puis réinitialiser à nouveau. Vous pouvez jeter un oeil à mon petit outil : https://github.com/bammoo/load-image/blob/master/index.js

Scène réelle :

loadAllImages(imgurlList, null, () => {
  // this.$refs.scroller.reset() 
  this.$broadcast('pullup:reset', uuid)
})

Vous pouvez également utiliser l'outil ci-dessus pour précharger toutes les images et, une fois le chargement terminé, ajouter les données au tableau de la boucle v-for.