vue下拉刷新组件的开发及slot的使用详解
更新时间：2020年12月23日 10:04:10 作者：行舟客
这篇文章主要介绍了vue下拉刷新组件的开发及slot的使用详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
“下拉刷新”和“上滑加载更多”功能在前端、尤其是移动端项目中非常重要，这里笔者由曾经做过的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 事件中，我们主要是做一些动画执行的操作，大家可以看看代码中的注释，这里说明一下：
- 此时手指离开屏幕，位移量达到临界值时，并且也有进入下拉刷新的标志位，就表明要触发正在刷新。此时圆形 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
<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>
所以这里这样做，就是为了在“父组件”中调用时让“下拉的动画”更自然，但又不会增加一个文件的负担。
到此这篇关于vue下拉刷新组件的开发及slot的使用详解的文章就介绍到这了,更多相关vue下拉刷新组件slot使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
埋点分析是网站分析的一种常用的数据采集方法,下面这篇文章主要给大家介绍了关于如何通过Vue自定义指令实现前端埋点的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
vue组件 keep-alive 和 transition 使用详解
这篇文章主要介绍了vue组件 keep-alive 和 transition 使用详解,需要的朋友可以参考下2019-10-10
这篇文章主要给大家介绍了关于在vue.js中引入vuex储存接口数据及调用的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-12-12
这篇文章主要介绍了vue实现的请求服务器端API接口,结合实例形式分析了vue针对post、get、patch、put等请求的封装与调用相关操作技巧,需要的朋友可以参考下2019-05-05
在vue的使用过程中,有一个组件,几乎是必用的,那就是router-view,它是所有组件的入口,是单页面系统的一把利剑,如果你的系统是火箭,那么router-view无疑将是这艘火箭的北斗卫星，本文将给大家介绍vue中的router-view组件是如何生成的,感兴趣的朋友可以参考下2024-01-01
这篇文章主要介绍了Element-UI中Upload上传文件前端缓存处理示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这篇文章主要介绍了vue嵌套路由与404重定向实现方法,结合实例形式分析了vue.js嵌套路由与404重定向的概念、原理、实现步骤与相关操作技巧,需要的朋友可以参考下2018-05-05
下面小编就为大家分享一篇基于vue2.0动态组件及render详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
Vue.js 是用于构建交互式的 Web 界面的库。这篇文章主要介绍了Vue表单实例代码的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
这篇文章主要介绍了深入理解vue的使用，对vue感兴趣的同学，可以参考下2021-05-05
最新评论