Home > Web Front-end > JS Tutorial > body text

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

php中世界最好的语言
Release: 2018-05-24 15:55:28
Original
2565 people have browsed it

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();
          }
      });
    }
})
Copy after login

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

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template