vue项目之自定义组件实现PC端下拉加载

痛定思痛。 2021-08-29 20:13 463阅读 0赞

## 一、需求 ##

滑动 el-table 滚动条，实现 thead 不动，下拉 tbody 到底部时，el-table加载数据。
    具体UI请看另一篇文章的需求

[PC端下拉加载][PC]

## 二、经过 ##

同事正好有一个写好的下拉加载的组件，就用了

自定义组件 DivScrollPagination.vue

<template>
      <div>
        <div v-if="loading==0" class="load-more">正在加载...</div>
       
      </div>
    </template>
    
    <script>
    export default { 
      props: { 
        pageCount:Number,//页数
          divId:String
      },
      mounted(){ 
          // 注册scroll事件并监听
          let _this = this;
          let div = document.getElementById(this.divId);
          div.addEventListener('scroll',function(){ 
              // 判断是否滚动到底部
              if(_this.hasMore() && _this.getScrollTop() + _this.getHeight() > (_this.getScrollHeight()-20) && _this.loading==1 && _this.isStop==0) { 
                  // 如果开关打开则加载数据
                  if(_this.hasMore()){ //还有数据
                      _this.currentPage++;
                      _this.loading=0;
                      _this.$emit('current-change',_this.currentPage);
                  }
              }
          });
      },
        watch: { 
            pageCount:function () { 
    
            }
        },
      data: function () { 
            return { 
               currentPage:1,
               isStop:0,
               loading:1,
            }
      },
      methods: { 
          stopLoad(){ 
            this.isStop=1;
          },
          startLoad(){ 
            this.isStop=0;
          },
          hasMore(){ 
            return this.currentPage<(this.pageCount-1);
          },
          loadFinish(){ 
              this.loading=1;
          },
          resetPagination(){ 
              this.currentPage=0;
              document.getElementById(this.divId).scrollTop = 0;
          },
          getScrollTop(){ 
            let div = document.getElementById(this.divId);
            return div.scrollTop;
          },
          getScrollHeight(){ 
            let div = document.getElementById(this.divId);
            return div.scrollHeight;
          },
          getHeight(){ 
              let div = document.getElementById(this.divId);
              return div.clientHeight;
          }
    
      }
    }
    </script>
    <style scoped lang="scss">
      .load-more{ 
        text-align: center;
        color:#666;
        margin-top:20px;
      }
    </style>

项目中使用：

import DivScrollPagination from "../../components/DivScrollPagination";
    export default { 
      name: "index",
      components: { 
        'div-scroll-pagination': DivScrollPagination,
      },
      data() { 
    	return { 
    	  // DivScrollPagination
          pageCount: 100,
          divScrollPage: 0,
          divScrollPagesize: 3,
          divScrollData: [
            { id: "01", name: "用户01"},
            { id: "02", name: "用户02"},
            { id: "03", name: "用户03"},
            { id: "011", name: "用户011"},
            { id: "022", name: "用户022"},
            { id: "033", name: "用户033"},
            { id: "0111", name: "用户0111"},
            { id: "0222", name: "用户0222"},
            { id: "0333", name: "用户0333"},
          ],
          datas: [
            { id: "1", name: "用户1"},
            { id: "2", name: "用户2"},
            { id: "3", name: "用户3"},
            { id: "4", name: "用户4"},
            { id: "5", name: "用户5"},
            { id: "6", name: "用户6"},
            { id: "7", name: "用户7"},
            { id: "8", name: "用户8"},
            { id: "9", name: "用户9"},
            { id: "10", name: "用户10"},
            { id: "11", name: "用户11"},
            { id: "12", name: "用户12"},
            { id: "13", name: "用户13"},
            { id: "14", name: "用户14"},
            { id: "15", name: "用户15"},
            { id: "16", name: "用户16"},
            { id: "17", name: "用户17"},
            { id: "18", name: "用户18"},
            { id: "19", name: "用户19"},
            { id: "20", name: "用户20"},
            { id: "21", name: "用户21"},
            { id: "22", name: "用户22"},
            { id: "23", name: "用户23"},
            { id: "24", name: "用户24"},
            { id: "25", name: "用户25"},
            { id: "26", name: "用户26"},
            { id: "27", name: "用户27"}
          ],
    	}
      },
      methods: { 
        // DivScrollPagination
        currentChange(currentPage) { 
          console.log(currentPage, this.$refs, 'currentPage????')
          this.$refs.divScroll.loadFinish();
          let startIndex = (currentPage - 1) * this.divScrollPagesize;
          let endIndex = startIndex + this.divScrollPagesize;
          console.log(this.divScrollData, 'this.megenTableDate...1111')
          this.divScrollData.push(...this.datas.slice(startIndex, endIndex));
          console.log(this.divScrollData, 'this.megenTableDate...2222')
        },
      }

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 1]

## 三、实际使用 ##

code都差不多，这里就直接贴图了

DOM：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 2]  
VUE：  
关于 el-table 相关的数据和上面的demo也差不多，用到实际上要和后台接口联调，就不一一展示了。  
这里主要时候一下，怎么在自己项目里面给自定义组件绑定el-table的滚动条。

首先，自定义组件 mounted 绑定事件里加一个判断。
    因为 el-table 是通过点击按钮后，动态生成的，不能在 mounted 里面绑定，
    只能在 methods方法里面写一个方法，父组件调用子组件的方法，来绑定 scroll 事件。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 4]

新增一个bindScroll方法后，相关方法也要跟着做校验。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 5]

渲染 el-table 后，调用自定义组件绑定方法

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 6]  
dialog.pageCount是从接口里面获取的 // 数据总共多少页

currentChangeToDialog方法：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 7]

[PC]: https://blog.csdn.net/yan263364/article/details/106119618
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70]: /images/20210804/8174e819ce3a40409bc1660f4b5c32ed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 1]: /images/20210804/643b61f08dce44609b25f3bfdcf0fd65.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 2]: /images/20210804/4bc8b5406d284d0a9dffa727b5bb4145.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 3]: /images/20210804/67aade17506c4981b635837d7fda12ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 4]: /images/20210804/9409292f71134dc9b3227f8ddd28d1cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 5]: /images/20210804/8809005fbab04eec97f0f7ec8a292768.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 6]: /images/20210804/e0667f67227344b2891a837d6da55668.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 7]: /images/20210804/62089af1008945b9bcff7f3da8236f6b.png