DDR爱好者之家

vue下拉刷新组件的开发及slot的使用详解
站长资源 2024/12/24 佚名
7 1538
DDR爱好者之家 Design By 杰米

“下拉刷新”和“上滑加载更多”功能在前端、尤其是移动端项目中非常重要，这里笔者由曾经做过的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 来判断。
  • 在进入下拉刷新状态时，此时手指不断向下拖动，首先圆形 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 事件中，我们主要是做一些动画执行的操作，大家可以看看代码中的注释，这里说明一下：

  1. 此时手指离开屏幕，位移量达到临界值时，并且也有进入下拉刷新的标志位，就表明要触发正在刷新。此时圆形 icon原地旋转，并触发下拉刷新回调方法，延迟 700ms 后向上收起。
  2. 我们在实现圆形 icon 时的旋转和位移动画时，用了两个 div，在 touchmove 时，我们主要对外层的 div 也就是 ref=circleIcon，来实现位移和旋转。
  3. 在 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

<template>中为什么有<slot>？

slot有三种形式：

  1. 普通插槽
  2. 具名插槽
  3. 作用域插槽

可能我们一般用具名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>

所以这里这样做，就是为了在“父组件”中调用时让“下拉的动画”更自然，但又不会增加一个文件的负担。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米