vue项目之PC端下拉加载

傷城~ 2021-08-29 20:40 807阅读 0赞

## 一、需求 ##

产品要求PC端实现下拉加载更多的数据。

![在这里插入图片描述][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]

## 二、经过 ##

经调查，移动端用着比较好，PC端很少有用到。基本都是自己手写一个组件。
    在git上有一个 vue-mugen-scroll，用的不多，但是实现起来很方便。

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

## 三、用法 ##

先用npm安装了组件

npm install --save vue-mugen-scroll

然后，下拉加载功能需求在哪个页面用，就import  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 4]

import MugenScroll from "vue-mugen-scroll"

vue – components加入组件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 5]

components: { 
      'mugen-scroll': MugenScroll,
    },

vue – data等  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 6]

data() { 
        return { 
           // vue-mugen-scroll
          mugenLoading: false,
          megenTableDate: [],
          megenPage: 1,
          // 总页数
          megenPageTotal: 20,
          megenPagesize: 3,
          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"}
          ],
        }
      },
      mounted() { 
        const _this = this;
        this.$nextTick(() => { 
          _this.fetchData();
        });
      },
      methods: { 
     	// mugen-scroll
        fetchData() { 
          if (this.megenPage <= this.megenPageTotal) { 
            // console.log("loadMore...");
            this.mugenLoading = true;
            // 模拟分页查询
            let startIndex = (this.megenPage - 1) * this.megenPagesize;
            let endIndex = startIndex + this.megenPagesize;
            this.megenTableDate.push(...this.datas.slice(startIndex, endIndex));
            // 页码+1
            this.megenPage++;
            // console.log(this.megenTableDate);
            this.mugenLoading = false;
          }
        }
     }

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

## 四、缺点 ##

不够灵活，项目中是想通过el-table的滚动条，下拉，实现加载数据。
    这样只能自己写组件。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70]: /images/20210804/b1f42822efef4b5184644879625b917e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 1]: /images/20210804/0092f15b08734cb19f61df30046f6238.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 2]: /images/20210804/62fc366cb7ac4d0aa165c79be303e2cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 3]: /images/20210804/2495150a04e5442dad9d991360222e4e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 4]: /images/20210804/f35198b55e454aea8e2bed4c819a8f1d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 5]: /images/20210804/2cb0f67298b04c2ab7165dac94c3d775.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 6]: /images/20210804/b92dbcb23fca4d71ac9624cb5f674b45.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 7]: /images/20210804/a33706d428714f2ab08926064ef3820a.png