1
votes

Détecter le défilement sur le corps en vue

J'ai un tableau avec un en-tête collant et un tbody défilant mais je ne peux pas obtenir mon ' scroll ou' window.addEventListener ( 'scroll') 'pour travailler du tout. Comment détecter un scroll dans un table body uniquement?

created() {
    window.addEventListener('scroll', this.handleScroll);
},

destroyed() {
    window.removeEventListener('scroll', this.handleScroll);
},

methods: {
    handleScroll() {
        console.log('scrolled)
    },
}

J'ai essayé d'ajouter v-scroll = "handleScroll " à table & tbody mais ne l'appelle toujours pas même lorsque je place la souris dans la table et scroll code>

vue.js vuejs2

0 commentaires

3 Réponses :

0
votes

Ajoutez le Listener d'événements à l'élément de table. Si cela ne fonctionne pas, essayez d'ajouter l'écouteur d'événements au tbody

<table @scroll="handleScroll">
  <!-- ... -->
</table>

1 commentaires

Selon ma description, cela ne fonctionne pas. J'ai déjà essayé ça comme je l'ai mis

0
votes

Vous pouvez utiliser l'écouteur v-on: scroll.passive . Voici un exemple:

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

<div id="app">
    <table>
         <thead>
              <tr>
                   <th>Month</th>
                   <th>Savings</th>
              </tr>
         </thead>
         <tbody v-on:scroll.passive='handleScroll'>
              <tr>
                   <td>January</td>
                   <td>$100</td>
              </tr>
              <tr>
                   <td>February</td>
                   <td>$80</td>
              </tr>
              <tr>
                   <td>March</td>
                   <td>$90</td>
              </tr>
              <tr>
                   <td>April</td>
                   <td>$190</td>
              </tr>
              <tr>
                   <td>May</td>
                   <td>$80</td>
              </tr>
              <tr>
                   <td>June</td>
                   <td>$30</td>
              </tr>
        </tbody>
    </table>
</div>

table {
    width: 100%;
}

thead, tbody, tr, td, th { display: block; }

tr:after {
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

thead th {
    height: 30px;

    /*text-align: left;*/
}

tbody {
    height: 80px;
    overflow-y: auto;
}

tbody td, thead th {
    width: 19.2%;
    float: left;
}

new Vue({
     el: '#app',
     methods:{
          handleScroll(e){
               console.log("scroll");
          }
     }
})

1 commentaires

J'ai essayé votre solution et elle ne se déclenche toujours pas. Je ne sais pas pourquoi, mais j'ai maintenant inclus mon HTML complet

0
votes

Ajout de @scroll à mon

qui a fonctionné

0 commentaires