vue下拉刷新组件的开发及slot的使用详解

2023-07-07 21:53:04 78

“下拉刷新”和“上滑加载更多”功能在前端、尤其是移动端项目中非常重要，这里笔者由曾经做过的vue项目中的“blink”功能和各位探讨下【下拉刷新】组件的开发：

正式开篇

在前端项目的components文件夹下新建pullRefreshView文件夹，在其中新建组件index.vue：（它代表“整个屏幕”，通过slot插入页面其他内容而不是传统的设置遮罩层触发下拉刷新）

首先需要编写下拉刷新组件的template，这里用到，代码如下：

上面代码中，最外层使用了一个div用来包裹，作为事件绑定的容器，同时新建一个圆形icon的div.circleIcon，我们将此icon样式设置在屏幕外，达到隐藏的效果，代码如下：

下拉刷新组件的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
	}
	lettarget=evt.targetTouches[0]
	//向上滑为正，向下拉为负
	this.pullRefresh.percentage=(this.pullRefresh.dragStart-target.clientY)/window.screen.height
	letscrollTop=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
			lettranslateY=-this.pullRefresh.percentage*this.pullRefresh.moveCount
			if(Math.abs(this.pullRefresh.percentage)<=this.pullRefresh.dragThreshold){
				letrotate=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来判断。
在进入下拉刷新状态时，此时手指不断向下拖动，首先圆形icon.circleIcon会向下滚动并旋转，当滚动到临界值时就只原地旋转。
如果手指在向上拖动，圆形icon.circleIcon就会向上滚动并旋转。
直到手指离开屏幕前，都不会触发下拉刷新，只是圆形icon.circleIcon在不停的上下移动。

监听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事件中，我们主要是做一些动画执行的操作，大家可以看看代码中的注释，这里说明一下：

此时手指离开屏幕，位移量达到临界值时，并且也有进入下拉刷新的标志位，就表明要触发正在刷新。此时圆形icon原地旋转，并触发下拉刷新回调方法，延迟700ms后向上收起。
我们在实现圆形icon时的旋转和位移动画时，用了两个div，在touchmove时，我们主要对外层的div也就是ref=circleIcon，来实现位移和旋转。
在touchend时，我们主要给内层的div也就是ref=circleIconInner来加animation动画，因为无法给一个div同时使用位移旋转和animation动画，所以这里一个技巧就是给父元素设置位移和旋转，它的子元素在不设置任何CSS动画样式时，是会随着父元素而生效的。

最后，我们看下【data】中都有什么：

data(){
	return{
		pullRefresh:{
			dragStart:null,//开始抓取标志位
			percentage:0,//拖动量(百分比)
			dragThreshold:0.3,//临界值
			moveCount:200,//位移系数，可以调节圆形图片icon的运动速率
			joinRefreshFlag:null,//进入刷新状态的标志位（true）
		}
	}
},

补充：slot

vue下拉刷新组件的开发及slot的使用详解

正式开篇

我是子组件

这是父组件地盘

这是父组件地盘

我是子组件

随机推荐

vue下拉刷新组件的开发及slot的使用详解

正式开篇

我是子组件

这是父组件地盘

这是父组件地盘

我是子组件

热门推荐

随机推荐