Vue指令实现列表无限下拉刷新

Posted 2020-12-13 zoujiyun

在Vue.js中实现一个列表无限下拉刷新功能，最好的实现方式应该是利用自定义指令，Vue除了核心功能默认内置的指令 (v-model 和 v-show)，在仍然需要对普通 DOM 元素进行底层操时，推荐使用自定义指令。Vue指令为我们提供了以下几个钩子函数，

const MyDirective = {
  bind(el, binding, vnode, prevVnode) {},
  inserted() {},
  update() {},
  componentUpdated() {},
  unbind() {}
}

我们这样来设计指令的使用方式

它有三个入参，即：

1. distance：距离底部多少距离时触发加载方法。
2. immediate：是否初始化时先执行加载方法，以防止初始内容太少而无法触发滚动条。
3. callbackFn：加载内容的函数。
   都通过钩子函数的默认参数binding来获取，即binding.arg, binding.modifiers, binding.value

判断一个container元素的内容是否滚动到底部，成立条件为scrollHeight - scrollTop <= clientHeight。如果想让内容距离底部 xxx distance时加载，则 scrollHeight - scrollTop - distance <= clientHeight。
【这三个属性都是container容器元素的属性，而不是滚动内容元素的属性】。容器元素高度一定是固定的，而不是由内容撑开，这样才会有滚动条出现，当然overflow肯定不能为hidden。

1. scrollHeight
   只读属性，表示一个元素内容高度，包括由于溢出导致的视图中不可见内容。当没有滚动条的情况下scrollHeight等于clientHeight。会对结果四舍五入进行取整，如果需要小数则使用element.getBoundingClientRect().
2. clientHeight
   只读属性。
   clientHeight = 内容高度 + padding。
   offsetHeight = 内容高度 + padding + border。
3. scrollTop
   一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。

指令的js代码：

export default {
  inserted(el, binding) {
    const domHeight = el.clientHeight;
    let distance = Number(binding.arg)
    if (Number.isNaN(distance)) distance = 0
    const { immediate } = binding.modifiers
    const cb = binding.value

    if (el.scrollHeight === 0) {
      console.log(`scollheigt == ${el.scrollHeight}, 请检查overflow属性`);
    }

    const handleScroll = () => {
      if (el.scrollHeight - el.scrollTop - distance <= domHeight) {
        console.log(el.scrollTop ,‘bottom!‘);
        cb()
      }
    }
    el[‘ifsScope‘] = { handleScroll } 
    
    el.addEventListener(‘scroll‘, handleScroll)

    if (immediate) {
      const observer = new MutationObserver(handleScroll)
      observer.observe(el, { childList: true, subtree: true })
      handleScroll()
    }
  },
  unbind(el) {
    let { handleScroll } = el[‘ifsScope‘]
    el.removeEventListener(‘scroll‘, handleScroll)
  }
}

然后使用局部注册的方式使用：

import infiniteScroll from ‘./iScroll.js‘
const vm = new Vue({
  el: ‘#app‘,
  directives: { infiniteScroll },
})