(编辑：jimmy 日期: 2024/12/23 浏览：2)
“下拉刷新”和“上滑加载更多”功能在前端、尤其是移动端项目中非常重要，这里笔者由曾经做过的vue项目中的“blink”功能和各位探讨下【下拉刷新】组件的开发：
在前端项目的 components 文件夹下新建 pullRefreshView 文件夹，在其中新建组件 index.vue：（它代表“整个屏幕”，通过slot插入页面其他内容而不是传统的设置遮罩层触发下拉刷新）
首先需要编写下拉刷新组件的 template，这里用到 <slot>，代码如下：
<template> <div class="pullRefreshView" @touchmove="touchmove" @touchstart="touchstart" @touchend="touchend"> <div ref="circleIcon" class="circle-icon"> <div ref="circleIconInner" class="circle-icon-inner"></div> </div> <slot></slot> </div> </template>
上面代码中，最外层使用了一个 div 用来包裹，作为事件绑定的容器，同时新建一个圆形 icon 的 div .circleIcon，我们将此 icon 样式设置在屏幕外，达到隐藏的效果，代码如下：
<style>
.circle-icon{
position: absolute;
left: 0.625rem;
top: -1.875rem;
}
.circle-icon-inner{
width: 1.5625rem;
height: 1.5625rem;
background-image: url('圆圈图片地址');
background-size: cover;
}
.circle-rotate{
animation: xuzhuan .8s linear infinite;
}
@keyframes xuzhuan{
0%{}
25%{}
50%{}
75%{}
100%{}
}
</style>
下拉刷新组件的 UI 基本编写完毕，接下来就要绑定事件了，通过上述分析，加上我们之前章节开发图片查看器的原理，我们需要用到移动端 touchstart，touchmove，touchend 事件，可以实现下拉刷新效果。
首先，监听 touchstart 事件：
touchstart(evt){
this.pullRefresh.dragStart=evt.targetTouches[0].clientY
this.$refs.circleIcon.style.webkitTransition='none'
},
在 touchstart 事件中，我们主要做的是记录一些初始值，包括手指第一次接触屏幕时的位置，然后将圆形 icon 的动画效果先隐藏。
然后，监听 touchmove 事件：
touchmove(evt){
if(this.pullRefresh.dragStart===null){
return
}
let target=evt.targetTouches[0]
// 向上滑为正，向下拉为负
this.pullRefresh.percentage=(this.pullRefresh.dragStart-target.clientY)/window.screen.height
let scrollTop=document.documentElement.scrollTop || document.body.scrollTop
if(scrollTop===0){
//this.pullRefresh指data中的pullRefresh对象（下方有），而evt即事件event参数
if(this.pullRefresh.percentage<0 && evt.cancelable){
evt.preventDefault()
this.pullRefresh.joinRefreshFlag=true
let translateY=-this.pullRefresh.percentage*this.pullRefresh.moveCount
if(Math.abs(this.pullRefresh.percentage)<=this.pullRefresh.dragThreshold){
let rotate=translateY/30*360
this.$refs.circleIcon.style.webkitTransform='translate3d(0'+translateY+'px,0) rotate('+rotate+'deg)'
}
}else{
if(this.pullRefresh.joinRefreshFlag===null){
this.pullRefresh.joinRefreshFlag=false
}
}
}else{
if(this.pullRefresh.joinRefreshFlag===null){
this.pullRefresh.joinRefreshFlag=false
}
}
},
在 touchmove 事件里，我们主要做的是根据手指移动的量来实时将圆形 icon 移动并旋转，这里有几点确实要说明一下：
scrollTop == 0和this.pullRefresh.percentage < 0 来判断。监听 touchend 事件：
touchend(evt){
if(this.pullRefresh.percentage===0){
return
}
if(Math.abs(this.pullRefresh.percentage)>this.pullRefresh.dragThreshold && this.pullRefresh.joinRefreshFlag){
this.$emit('onRefresh')
this.$refs.circleIconInner.classList.add('circle-rotate')
setTimeout(()=>{
this.$refs.circleIconInner.classList.remove('circle-rotate')
this.$refs.circleIcon.style.webkitTransition='330ms'
this.$refs.circleIcon.style.webkitTransform='translate3d(0,0,0) rotate(0deg)'
},700)
}else{
if(this.pullRefresh.joinRefreshFlag){
this.$refs.circleIcon.style.webkitTransition='330ms'
this.$refs.circleIcon.style.webkitTransform='translate3d(0,0,0) rotate(0deg)'
}
}
this.pullRefresh.joinRefreshFlag=null
this.pullRefresh.dragStart=null
this.pullRefresh.percentage=0
}
在 touchend 事件中，我们主要是做一些动画执行的操作，大家可以看看代码中的注释，这里说明一下：
最后，我们看下【data】中都有什么：
data(){
return{
pullRefresh:{
dragStart:null, //开始抓取标志位
percentage:0, //拖动量(百分比)
dragThreshold:0.3, //临界值
moveCount:200, //位移系数，可以调节圆形图片icon的运动速率
joinRefreshFlag:null, //进入刷新状态的标志位（true）
}
}
},
补充：slot
<template>中为什么有<slot>？
slot有三种形式：
可能我们一般用具名slot的时候比较多，但是第一种也格外好用——正因为它没有名字，所以引用这个组件的另一个组件中包裹其中的所有内容都归这个slot所有：
假定my-component组件中有如下模板：
<div> <h2>我是子组件</h2> <slot>只有在没有内容分发的情况下这句话才会出现</slot> </div>
父组件模板：
<div> <h1>这是父组件地盘</h1> <my-component> <p>这是一些初始内容</p> <p>这是更多的内容</p> </my-component> </div>
最后就会被渲染成这样：
<div> <h1>这是父组件地盘</h1> <div> <h2>我是子组件</h2> <p>这是一些初始内容</p> <p>这是更多的内容</p> </div> </div>
所以这里这样做，就是为了在“父组件”中调用时让“下拉的动画”更自然，但又不会增加一个文件的负担。