vue移动端下拉刷新和上滑加载

<template>
 <div class="mu-load-more"
  @touchstart="touchStart($event)" @touchmove="touchMove($event)" @touchend="touchEnd($event)">
 <div class="mu-refresh-control" v-if="!isNaN(top) && top !== 0" :style="{ transform: 'translate3d(0, ' + top + 'px, 0)' }">
  <svg-icon icon-class="gengxin" class="mu-refresh-svg-icon" v-if="state === 0 || state === 1" :style="{ transform: 'rotate(' + (top * 2) + 'deg)' }"></svg-icon>
 </div>
 <div class="mu-refresh-control son" v-if="state === 2" :style="{ 'margin-top': marginTop + 'px' }">
  <svg-icon icon-class="jianchagengxin" class="mu-refresh-svg-icon refresh" v-if="state === 2"></svg-icon>
 </div>
 <slot></slot>
 </div>
</template>

<script>
export default {
 props: {
  offset: {
   type: Number,
   default: 40
  },
  enableInfinite: {
   type: Boolean,
   default: true
  },
  enableRefresh: {
   type: Boolean,
   default: true
  },
  onRefresh: {
   type: Function,
   default: undefined,
   required: false
  },
  onInfinite: {
   type: Function,
   default: undefined,
   require: false
  }
 },
 data() {
  return {
   top: 0,
   state: 0,
   // 开始滑动时，y轴位置
   startY: 0,
   startScroll: 0,
   touching: false,
   infiniteLoading: false,
   refreshShow: true,
   infiniteState: true,
   showLoad: false,
   marginTop: 0
  }
 },
 created(){
  if(this.enableRefresh === false) {
   this.refreshShow = false
  }
  window.addEventListener('scroll', this.onScroll)
 },
 destroyed () {
  window.removeEventListener('scroll', this.onScroll)
 },
 methods: {
  // 触摸开始（手指放在触摸屏上） 
  touchStart(e) {
   if(window.pageYOffset > 0) return
   if(!this.enableRefresh) return
   this.startY = e.targetTouches[0].pageY
   this.startScroll = this.$el.scrollTop || 0
   //开启滑动记录
   this.touching = true
  },
  // 拖动（手指在触摸屏上移动）
  touchMove(e) {
   // 这里控制是否可以上下拉  代表正在滑动 
   if (!this.enableRefresh || this.$el.scrollTop > 0 || !this.touching) {
    return
   }
   // 获取拉取的间隔差  当前移动的y点   初始的y点    初始顶部距离
   let diff = e.targetTouches[0].pageY - this.startY - this.startScroll
   //如果是往上滑的话，就取消事件
   if (diff > 0) e.preventDefault()
   // 对状态进行处理，看是否处于刷新中
   this.top = Math.pow(diff, 0.8) + (this.state === 2 "scss" scoped>
.mu-load-more {
 position: relative;
 overflow: hidden;
}
.mu-refresh-control {
 display: flex;
 margin: 0 auto;
 width: 80px;
 height: 80px;
 color: #2196f3;
 align-items: center;
 justify-content: center;
 background-color: #FFF;
 border-radius: 50%;
 -webkit-box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
 box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
 position: absolute;
 left: 50%;
 margin-left: -38px;
 margin-top: 24px;
 z-index: 90;
}
.mu-refresh-svg-icon {
 display: inline-block;
 width: 20px;
 height: 20px;
 fill: currentColor;
}
.refresh {
 -webkit-transform: rotate(360deg);
 animation: rotation 1s linear infinite;
 -moz-animation: rotation 1s linear infinite;
 -webkit-animation: rotation 1s linear infinite;
 -o-animation: rotation 1s linear infinite;
}
@-webkit-keyframes rotation {
 from {
  transform: rotate(0deg);
 }
 to {
  transform: rotate(360deg);
 }
}
.son {
 position: absolute;
 animation: lightAni 1s linear 1;
}
@keyframes lightAni {
 0% {
  transform: translateY(0);
 }
 50% {
  transform: translateY(-50px);
 }
 100% {
  transform: translateY(-100px);
 }
}
</style>

<scrollRefresh :on-refresh="refresh" :on-infinite="load">
 <!-- 页面内容 -->
</scrollRefresh>

<script>
// 引入组件
import scrollRefresh from '@/components/scrollRefresh'
export default {
 components: {
   scrollRefresh
  }
}
</script>