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 相关文章推荐
Vue实现点击当前行变色
Dec 14 Vue.js
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
Vue看了就会的8个小技巧
Jan 21 Vue.js
vue 组件基础知识总结
Jan 26 Vue.js
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
Vue3.0 手写放大镜效果
Jul 25 Vue.js
vue实现滑动解锁功能
Mar 03 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
vue实力踩坑之push当前页无效
Apr 10 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-fpm的配置详解
2013/06/03 PHP
PHP高级编程实例:编写守护进程
2014/09/02 PHP
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
JS中Iframe之间传值及子页面与父页面应用
2013/03/11 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
使用jQuery判断IE浏览器版本的代码
2014/06/14 Javascript
javascript 获取HTML DOM父、子、临近节点
2014/06/16 Javascript
jquery实现垂直和水平菜单导航栏
2020/08/27 Javascript
jQuery查找dom的几种方法效率详解
2017/05/17 jQuery
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
NodeJS http模块用法示例【创建web服务器/客户端】
2019/11/05 NodeJs
Javascript摸拟自由落体与上抛运动原理与实现方法详解
2020/04/08 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
2020/07/17 Javascript
JavaScript的垃圾回收机制与内存管理
2020/08/06 Javascript
OpenLayers3实现测量功能
2020/09/25 Javascript
python计数排序和基数排序算法实例
2014/04/25 Python
Python实现周期性抓取网页内容的方法
2015/11/04 Python
python遍历 truple list dictionary的几种方法总结
2016/09/11 Python
详解python之配置日志的几种方式
2017/05/22 Python
Python递归实现汉诺塔算法示例
2018/03/19 Python
Python面向对象程序设计类变量与成员变量、类方法与成员方法用法分析
2019/04/12 Python
Django如何实现上传图片功能
2019/08/16 Python
关于python导入模块import与常见的模块详解
2019/08/28 Python
Python动态导入模块和反射机制详解
2020/02/18 Python
HTML5地理定位与第三方工具百度地图的应用
2016/11/17 HTML / CSS
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
Laravel的加密解密与哈希实例讲解
2021/03/24 PHP
教育系毕业生中文求职信范文
2013/10/06 职场文书
2014年村委会工作总结
2014/11/24 职场文书
幼儿园班级管理心得体会
2016/01/07 职场文书
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android