vue实现m端列表的加载更多

m端列表的加载更多这是一个很常用的功能，也有很多现成的框架和组件可以使用，如果要自己实践的话还是主要看实现思路和可复用性。在看mint-ui源码的时候看到这个实现方式，分享一下

为什么要用vue的自定义指令，主要是因为自定义指令可以支持对普通DOM元素进行操作。我们需要在某一个dom元素上绑定滚动的事件，监听在滚动的过程中预加载（官方文档：https://cn.vuejs.org/v2/guide/custom-directive.html）

1、首先看我们怎么用

import InfiniteScroll from './infinite-scroll.js'
Vue.use(InfiniteScroll)

.list(
    v-infinite-scroll='getMore'
    infinite-scroll-disabled='finshed'
    infinite-scroll-pull-down='true'
    :infinite-scroll-distance='threshold'
)

备注：上面用的是pug的模板写法，实际上就是在dom结构上绑定几个属性

2、上面的infinite-scroll.js文件一定是要注册一个全局自定义指令InfiniteScroll

Vue.directive('InfiniteScroll', InfiniteScroll)

3、实现这个InfiniteScroll
（1）利用钩子函数给这个el绑定事件

export default {
// 初始化设置
bind (el, binding, vnode) {
  // 钩子函数的参数，可见官网
  el[ctx] = {
      el,
      vm: vnode.context,
      expression: binding.value
  }
  const args = arguments
  let cb = function () {
      el[ctx].vm.$nextTick(function () {
        // 这个地方需要有一个重试机制，就是当dom渲染完成再来绑定事件
        doBind.call(el[ctx], args)
      })
  }
  if (el[ctx].vm._isMounted) {
      cb()
      return
  }
  // 当组件mounted的时候会执行该函数el[ctx].vm指向调用的那个component
  el[ctx].vm.$on('hook:mounted', cb)
}
}

（2）解析传入的参数绑定事件

doBind = function () {
  // 避免重复绑定
  if (this.binded) return
  this.binded = true
  let directive = this
  let element = directive.el
  directive.scrollEventTarget = getScrollEventTarget(element)
  directive.scrollListener = throttle(doCheck.bind(directive), 500)
  // 绑定scroll事件，在滚动的过程中执行监听
  directive.scrollEventTarget.addEventListener('scroll', directive.scrollListener)
  // 解析参数例如距离多少开始加载下一页等
}

（3）滚动过程中判断是否加载等

doCheck = function () {
  let scrollEventTarget = this.scrollEventTarget
  let element = this.el
  let distance = this.distance
  if (this.disabled) return
  // 滚动区域在可视区域的上边界（已经滚动上去的）
  let viewportScrollTop = getScrollTop(scrollEventTarget)
  // 滚动区域在可视区域的下边界（滚动上去的+可视区域已经看到的）
  let viewportBottom = viewportScrollTop + getVisibleHeight(scrollEventTarget)
  let shouldTrigger = false
  // 判断加载更多
  if (scrollEventTarget === element) {
    shouldTrigger = scrollEventTarget.scrollHeight - viewportBottom <= distance
  } else {
    let elementBottom = getElementTop(element) - getElementTop(scrollEventTarget) + element.offsetHeight + viewportScrollTop
    shouldTrigger = viewportBottom + distance >= elementBottom
  }
  oldScrollDistance = viewportScrollTop
  // 判断如果触发到达加载的条件执行加载函数
  if (shouldTrigger && this.expression) {
    this.expression()
  }
}

备注：里面用到了一些方法，例如获取某一个元素相对于顶部的距离，获取滚动元素的可见区域高度，这些就不赘述了，但是需要提一下如何获取相对滚动的那个元素也就是getScrollEventTarget

getScrollEventTarget = function (element) {
  let currentNode = element
  while (currentNode && currentNode.tagName !== 'HTML' && currentNode.tagName !== 'BODY' && currentNode.nodeType === 1) {
    let overflowY = getComputedStyle(currentNode).overflowY
    if (overflowY === 'scroll' || overflowY === 'auto') {
      return currentNode
    }
    currentNode = currentNode.parentNode
  }
  return window
}

思路是循环找el的父级元素，获取它的overflowY，如果是有该属性且为滚动，则认为相对于这个元素滚动（这里在写样式的时候需要格外注意）

ok思路大概这样，感兴趣去看看源码，有解释的不对的也欢迎拍砖

最后编辑于：2020.03.08 15:25:06