Maison >interface Web >Tutoriel H5 >Comment element-ui exploite l'effet de défilement de la table
Cette fois, je vais vous montrer comment element-ui exploite l'effet de défilement de la table. Quelles sont les précautions pour le défilement de la table d'opération element-ui Voici un cas pratique, jetons un coup d'œil.
Ajouter un enregistrement global événement pour écouter les événements défilants
window.Vue.directive('loadmore', { bind(el, binding) { const selectWrap = el.querySelector('.el-tablebody-wrapper') selectWrap.addEventListener('scroll', function() { let sign = 100 const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight if (scrollDistance <= sign) { binding.value() } }) } })
le signe est utilisé pour marquer la position
Laisser directement le signe scrollDistance === ne garantit pas qu'il sera déclenché à chaque fois, il est donc représenté par un intervalle. La question des déclenchements fréquents sera abordée ultérieurement.
Ajouter des événements
Ajouter des événements personnalisés aux formulaires qui doivent être chargés sans fil, v-loadmore = "chargerPlus". Définir les événements déclenchés dans les méthodes
loadMore () { if (this.loadSign) { this.loadSign = false this.page++ if (this.page > 10) { return } setTimeout(() => { this.loadSign = true }, 1000) console.log('到底了', this.page) } }
this.loadSign est utilisé pour marquer si la page continuera à s'agrandir
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. contenu plus excitant, veuillez faire attention à php chinois Autres articles connexes en ligne !
Lecture recommandée :
Comment intégrer l'éditeur de texte enrichi UEditor
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!