Explication détaillée des étapes pour implémenter la surveillance du chargement progressif à l'aide des instructions vue

Cette fois, je vais vous apporter une explication détaillée des étapes pour implémenter la surveillance du chargement progressif à l'aide de la commande vue Quelles sont les précautions pour utiliser la commande vue pour implémenter la surveillance du chargement progressif. Voici une explication pratique. cas, jetons un coup d'oeil.

Puisque vous avez posé la question sincèrement, je vous le dirai avec miséricorde (Musashi & Kojiro)

La commande peut très bien faire cela. Prenons l'exemple de element-select :directives.js

// v-loadmore: 用于在element-ui的select下拉框加上滚动到底事件监听
Vue.directive('loadmore', {
    bind(el, binding) {
      
      // 获取element-ui定义好的scroll盒子
      const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdownwrap');
    
      SELECTWRAP_DOM.addEventListener('scroll', function() {
          /*
           * scrollHeight 获取元素内容高度(只读)
           * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
           * clientHeight 读取元素的可见高度(只读)
           * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
           * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
           */
          const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight;
          
          if(CONDITION) {
              binding.value();
          }
      });
    }
})

Dans le composant :

<template>
    <el-select 
        v-model="selectValue" 
        v-loadmore="loadMore">
        <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.accountName"
            :value="item.id">
        </el-option>
    </el-select>
</template>
// methods
loadMore() {
    // 这里可以做你想做的任何事 到底执行
},

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention à. d'autres articles connexes sur le site PHP chinois !

Lecture recommandée :

Résumé des styles CSS courants

Explication détaillée des étapes pour introduire l'éditeur ueditor dans houjs/ hou-admin

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!