vue下拉刷新

手写的一个下拉刷新，重点在于思路，自己记录一下 

<template>
    <div class="pullRefresh" ref='pullRefresh'>
        <div class="loadding" :style="{marginTop:-loadingRef+'px'}" ref='loading'>
            <!-- loading动画外部传入 -->
            <slot name="loadding"></slot>
        </div>
        <!-- 页面内容 -->
        <slot name="content"></slot>
    </div>
</template>

<script>
export default {
    data(){
        return{
            touchStart:0,   //触摸时记录触摸Y坐标
            loading:false,  //是否正在展示动画
            distance:0, //触摸y坐标到滑动的距离
            isStartPull:false,  //是否到达顶部
            loadingRef:10000,   //loading元素的高度
        }
    },
    methods:{
        stopPullDownRefresh(){
            this.loading = false;
            this.$refs.pullRefresh.style.overflow = 'auto'
            this.$refs.pullRefresh.style.marginTop = '0'
        }
    },
    mounted(){
        this.$nextTick(()=>{
            // 获取到下拉刷新元素的高度
            this.loadingRef = this.$refs.loading.offsetHeight;
            // 获取根元素
            let pullRefresh = this.$refs.pullRefresh;
            pullRefresh.addEventListener("touchstart",(e)=>{
                if(this.loading){
                    e.preventDefault();
                    return
                }
                if(pullRefresh.scrollTop<=20){
                    this.isStartPull = true
                }else{
                    this.isStartPull = false
                }
                this.touchStart = e.targetTouches[0].clientY
            })
            pullRefresh.addEventListener("touchmove",(e)=>{
                if(!this.isStartPull){
                    return
                }
                if(!this.touchStart){
                    return
                }
                if(this.loading && e.cancellabel){
                    e.preventDefault();
                    return
                }
                // 可以判断出是向上还是向下
                this.distance = e.targetTouches[0].clientY - this.touchStart
                if(pullRefresh.scrollTop==0){
                    if(this.distance>0){
                        try{
                            e.preventDefault();
                        }catch(e){

                        }
                        if(this.distance>this.loadingRef+20){
                            pullRefresh.style.overflow = 'inherit'
                            pullRefresh.style.marginTop = this.loadingRef+"px"
                        }
                    }
                }
            })
            pullRefresh.addEventListener("touchend",(e)=>{
                if(this.distance<=0){
                    this.stopPullDownRefresh()
                }
            })
        })
    }
}
</script>

<style scoped>
.pullRefresh{
    width: 100%;
    height: 100%;
    overflow-y: auto;
    transition:400ms;
}
</style>

使用的时候引入

    <pullDownRefresh ref='pullDownRefreshs'>
          <template v-slot:loadding>
              <svg t="1497367491334"
                viewBox="0 0 1024 1024"
                class="vue-pull-refresh-loading"
                style="width: 1.2em; height: 1.2em;vertical-align: middle;fill: currentColor;overflow: hidden;" 
                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1977">
                <path d="M486.75754 135.400013 402.25163 59.310554C388.509379 46.936957 387.96346 25.139993 400.208308 11.540621 412.822131-2.468343 433.957671-4.001381 447.930113 8.579401L601.089596 146.484825C605.090636 150.087331 607.97301 154.488612 609.74682 159.253816 614.767405 170.908986 613.043155 184.73657 603.956951 194.827778L466.051527 347.987261C453.677999 361.729512 431.880966 362.275431 418.281663 350.030583 404.27263 337.416761 402.739592 316.281152 415.320374 302.308778L504.712387 203.028852C300.714847 206.912339 136.539841 373.49343 136.539841 578.419721 136.539841 785.780633 304.639089 953.87988 512 953.87988 720.609624 953.87988 887.460159 790.22062 887.460159 584.090467 887.460159 517.424512 870.092464 453.371077 837.556793 396.914498 828.144212 380.58164 833.754269 359.710766 850.087128 350.298184 866.420054 340.885671 887.29086 346.49566 896.703442 362.828587 935.174114 429.583765 955.725642 505.37934 955.725642 584.090467 955.725642 828.220806 758.019723 1022.145363 512 1022.145363 266.937086 1022.145363 68.274358 823.482635 68.274358 578.419721 68.274358 341.828486 253.439157 148.484867 486.75754 135.400013Z" p-id="1978" fill="#666666">
                </path>
              </svg>
              释放加载
          </template>
          <template v-slot:content>
            <div v-for="item,index in 50">{{index}}</div>
          </template>
      </pullDownRefresh>

请求接口成功后，调用方法结束动画

this.$refs.pullDownRefreshs.stopPullDownRefresh()