vue实现下拉刷新和上拉加载

子组件向父组件传入回调函数，在下拉刷新和上拉加载时候调用，函数返回promise决定刷新组件的表现状态。

判断滚动条到底部，需要用到DOM的三个属性值，即scrollTop、clientHeight、scrollHeight。

scrollTop为滚动条在Y轴上的滚动距离。

clientHeight为内容可视区域的高度。

scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。

从这个三个属性的介绍就可以看出来，滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。

代码如下（兼容不同的浏览器）。

<template>
<!-- 下拉刷新 上拉加载更多-->
  <div class="container-wrapper"
    @touchstart="startTouch"
    @touchmove="move"
    @touchend="endTouch"
    ref="container"
  >
    <div class="content" ref="content">
      <!-- 下拉显示 -->
      <div class="status" :style="{'height': marginTop/50 + 'rem'}">
        <div class="msg" :style="{'line-height': height/50  + 'rem'}">
          <img src="@/assets/img/loading.png" class="icon" :class="loading !== 2 ? 'stop' : ''">
          {
  {msg}}
        </div>
      </div>
      <!-- 显示的数据 -->
      <slot name="main" />
      <!-- 上拉显示 -->
      <div class="status" v-show="gesture === 2" :style="{'height': heig