Vue 下拉刷新数据

思路

1. 使用directives来绑定监听元素
2. 通过el获取到元素，添加监听事件
3. 在回调中写对滚动事件的处理

数据的传输

指令中书写的方法this的指向会更改，因此选择了属性的方式，binding.value获取

• 通过数据类属性获取一些数据
• 通过方法类属性返回一些数据直接处理

其他

示例为上拉下拉都请求
由于请求数据的接口要求参数为： 当前页（组），每页数据量等
所以在store内存了参数的相关数据，也可以在组件内data中存
请求数据的时候拿到相关参数数据再请求
用每次请求到的数据更换store中要用于显示的数据

如果只是下拉请求，可以在将上拉监听写的方法删除，对store中要用于显示的数据添加后更新

// 要监听的元素
<el-row ref="reviewCard" v-scroll="{indFilterData:indFilterData,handleScroll:handleScroll}" >
</el-row>

// 定义指令
  directives: {
    scroll: {
      // 当绑定元素 el 插入到 DOM 中
      inserted(el, binding) {
        // 监听 el 滚动事件
        el.addEventListener('scroll', (e) => {
          // 获取请求信息，当前页面
          let indFilterData = binding.value.indFilterData;
          let page = indFilterData.page;
          // 获取相关高度
          let scrollTop = e.target.scrollTop;
          let scrollHeight = e.target.scrollHeight;
          let clientHeight = e.target.clientHeight;
          // 计算距离底部距离
          let buttomDis = scrollHeight - clientHeight - scrollTop;
          // 滚动条到顶部时
          if (scrollTop === 0) {
            page = page > 1 ? page - 1 : page;
            binding.value.handleScroll(page);
          }
          // 滚动条到底部时
          if (buttomDis === 0) {
            page += 1;
            binding.value.handleScroll(page);
          }
        });
      },
    },
  },

  computed: mapGetters([
    'indRevData',
    'indFilterData',
  ]),
  watch: {
    indRevData: {
      handler() {
        this.$refs.reviewCard.$el.scrollTop = 1;
      },
      deep: true,
    },
  },

  methods: {
    handleScroll(page) {
      const indFilterData = {
        page: page,
        perpage: this.indFilterData.perpage,
        category: this.indFilterData.category,
        name: this.indFilterData.name,
      };
      this.$store.commit('updatIndFilterData', indFilterData);
      // 请求评论信息
      getIndRevData(this, queryArray);
    },
  },