Detailed explanation of the steps to implement rolling loading monitoring using vue instructions

This time I will bring you a detailed explanation of the steps to implement rolling loading monitoring using the vue command. What are the precautions for implementing rolling loading monitoring using the vue command. The following is a practical case, let’s take a look.

Since you asked the question sincerely, I will tell you mercifully. (Musashi & Kojiro)

The command can do this very well. Let's take element-select as an example. :
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();
          }
      });
    }
})

In the component:

<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() {
    // 这里可以做你想做的任何事 到底执行
},

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Summary of commonly used css styles

##Detailed explanation of the steps to introduce the ueditor editor into houjs/hou-admin

The above is the detailed content of Detailed explanation of the steps to implement rolling loading monitoring using vue instructions. For more information, please follow other related articles on the PHP Chinese website!