标签：el Vue indFilterData binding let 刷新 scrollTop 数据 page

思路

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);
    },
  },

标签：el,Vue,indFilterData,binding,let,刷新,scrollTop,数据,page
来源： https://blog.csdn.net/feishuoren/article/details/120764454

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。