Maison > interface Web > Tutoriel H5 > le corps du texte

Comment element-ui exploite l'effet de défilement de la table

php中世界最好的语言
Libérer: 2018-03-27 17:37:18
original
4535 Les gens l'ont consulté

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()
  }
 })
 }
})
Copier après la connexion

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)
 }
 }
Copier après la connexion

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 :

Utiliser Compass dans Vue

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal