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


Posted in Vue.js onDecember 23, 2020

“下拉刷新”和“上滑加载更多”功能在前端、尤其是移动端项目中非常重要,这里笔者由曾经做过的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 == 0this.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>

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

到此这篇关于vue下拉刷新组件的开发及slot的使用详解的文章就介绍到这了,更多相关vue下拉刷新组件slot使用内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
如何实现vue的tree组件
Dec 03 Vue.js
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
vue实现按钮切换图片
Jan 20 Vue.js
Vue仿Bibibili首页的问题
Jan 21 Vue.js
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
详解Vue的七种传值方式
Feb 08 Vue.js
vue组件的路由高亮问题解决方法
May 11 Vue.js
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
Vue3 实现双盒子定位Overlay的示例
Dec 22 #Vue.js
详解Vue的异步更新实现原理
Dec 22 #Vue.js
Vue组件简易模拟实现购物车
Dec 21 #Vue.js
vue实现购物车的小练习
Dec 21 #Vue.js
Vue实现小购物车功能
Dec 21 #Vue.js
vue监听滚动事件的方法
Dec 21 #Vue.js
vue el-upload上传文件的示例代码
Dec 21 #Vue.js
You might like
php 获取文件行数的方法总结
2016/10/11 PHP
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
2009/04/24 Javascript
JavaScript浏览器选项卡效果
2010/08/25 Javascript
jquery 图片上传按比例预览插件集合
2011/05/28 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
2013/07/01 Javascript
使用JavaScript和C#中获得referer
2014/11/14 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
javascript验证香港身份证的格式或真实性
2017/02/07 Javascript
vue v-on监听事件详解
2017/05/17 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
详解vue项目接入微信JSSDK的坑
2018/12/14 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
JavaScript DOM常用操作代码汇总
2020/07/03 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
2020/08/06 Javascript
python中numpy包使用教程之数组和相关操作详解
2017/07/30 Python
Python爬虫中urllib库的进阶学习
2018/01/05 Python
Python求出0~100以内的所有素数
2018/01/23 Python
Python numpy.array()生成相同元素数组的示例
2018/11/12 Python
python机器学习包mlxtend的安装和配置详解
2019/08/21 Python
QML用PathView实现轮播图
2020/06/03 Python
HTML5-WebSocket实现聊天室示例
2016/12/15 HTML / CSS
如何在Canvas中添加事件的方法示例
2019/05/21 HTML / CSS
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
美国巧克力喷泉品牌:Sephra
2019/05/05 全球购物
英国运动服、设备及配件网站:DW Sports
2019/12/04 全球购物
电子邮箱格式怎么写
2014/01/12 职场文书
如何写自我鉴定
2014/03/19 职场文书
财产保全担保书范文
2014/04/01 职场文书
奠基仪式策划方案
2014/05/15 职场文书
小区物业管理2015年度工作总结
2015/10/22 职场文书
python3实现无权最短路径的方法
2021/05/12 Python
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA
python如何查找列表中元素的位置
2022/05/30 Python