vue项目之PC端下拉加载

一、需求

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

二、经过

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

三、用法

先用npm安装了组件

npm install --save vue-mugen-scroll

然后，下拉加载功能需求在哪个页面用，就import

import MugenScroll from "vue-mugen-scroll"

vue – components加入组件

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

vue – data等

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:

<div ref="lecture_warp" id="lecture_warp">
  <el-table :data="megenTableDate" border style="width: 100%">
    <el-table-column prop="name" label="用户姓名"></el-table-column>
  </el-table>
  <mugen-scroll :handler="fetchData" :should-handle="!mugenLoading"
                scroll-container="lecture_warp"></mugen-scroll>
</div>

四、缺点

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