android下拉刷新动画效果代码_vue项目实录:下拉刷新组件的开发及slot的使用
“下拉刷新”和“上滑加载更多”功能在前端、尤其是移动端项目中非常重要,这里笔者由曾经做过的vue项目中的“blink”功能和各位探讨下【下拉刷新】组件的开发:
JavaScript正式开篇
在前端项目的 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].clientYthis.$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.heightlet scrollTop=document.documentElement.scrollTop || document.body.scrollTopif(scrollTop===0){//this.pullRefresh指data中的pullRefresh对象(下方有),而evt即事件event参数if(this.pullRefresh.percentage<0 && evt.cancelable){evt.preventDefault()this.pullRefresh.joinRefreshFlag=truelet translateY=-this.pullRefresh.percentage*this.pullRefresh.moveCountif(Math.abs(this.pullRefresh.percentage)<=this.pullRefresh.dragThreshold){let rotate=translateY/30*360this.$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=nullthis.pullRefresh.dragStart=nullthis.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>
所以这里这样做,就是为了在“父组件”中调用时让“下拉的动画”更自然,但又不会增加一个文件的负担。
————————————————
版权声明:本文为CSDN博主「行舟客」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:
vue项目实录:下拉刷新组件的开发及slot的使用_flying meng的菜鸟居-CSDN博客blog.csdn.net
android下拉刷新动画效果代码_vue项目实录:下拉刷新组件的开发及slot的使用相关推荐
- iOS 类似亲宝宝app下拉刷新动画效果
iOS 类似亲宝宝app下拉刷新动画效果,最近看了下这种效果,感觉有点意思.于是就实现了一下. 方案一 采用两个背景View1.View2,三个球ball1,ball2,ball3,将ball1,ba ...
- jQuery模拟原生态App上拉刷新下拉加载效果代码
以下任意均可: 1. jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. 原文:http://www.sucaij ...
- android 自定义刷新控件,Android开发中MJRefresh自定义刷新动画效果
有时候我们对自己开发的项目经常不满意,但是我们要达到自定义刷新动画的效果有一定的难度,别着急,下面爱站技术频道和大家分享Android开发中MJRefresh自定义刷新动画效果,一起来学习吧! [一] ...
- 动态导航多级下拉菜单 html,css3实现的多级渐变下拉菜单导航效果代码
本文实例讲述了css3实现的多级渐变下拉菜单导航效果代码.分享给大家供大家参考.具体如下: 这是一款基于css3实现的下拉菜单导航,是非常漂亮的动画菜单,而且是多级菜单的形式,测试时发现可支持5级,估 ...
- js实现下拉菜单动画效果
js实现下拉菜单动画效果 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
- Android按下录音录音动画效果 ,自定义录音、播放动画View
Android按下录音录音动画效果 ,自定义录音.播放动画View https://download.csdn.net/download/abc2522/10327428?spm=1001.2101. ...
- android淡入淡出动画循环,Android应用开发之淡入淡出、缩放、旋转、平移、组合动画效果代码实现...
本文将带你了解Android应用开发Android动画开发之淡入淡出.缩放.旋转.平移.组合动画效果代码实现,希望本文对大家学Android有所帮助. 1.activity_main.xml文件 an ...
- android 开红包动画,Android实现红包雨动画效果
本文介绍了Android实现红包雨动画效果,分享给大家,希望对大家有帮助 红包雨 关于实现上面红包雨效果步骤如下: 1.创建一个红包实体类 public class RedPacket { publi ...
- android 说话水波动画,Android实用View——水波动画效果多种实现方式详解
原标题:Android实用View--水波动画效果多种实现方式详解 这次给大家带来的是一篇关于自定义View实现水波动画效果的文章,其实在去年项目中使用过类似的动画,当时就自定义View也实现了预期的 ...
最新文章
- 2007 China MVP Open Day
- 一些常用黑客工具的初步使用
- 比较全的 POM.xml
- linux系统打开m3u8文件,M3U8 文件扩展名: 它是什么以及如何打开它?
- c#使用Path.Combine的一个坑
- leetcode - 746. 使用最小花费爬楼梯
- saltstack 实验(小弟不才)
- python全栈开发_day42_数据库6
- php连接mysql MariaDB_PHP+MariaDB数据库操作基本技巧
- 03-0006 Python批量查询手机归属地
- 企业服务总线 ESB 介绍和用例
- java加载dll文件失败
- 视频去水印、文案提取和智能配音,视频搬运合成速成教程,超简单
- 发送邮箱验证码进行注册验证
- Portainer添加远程Docker(Docker API)
- 打破“双十定律”,华为云AI推动超级抗菌药Drug X研发加速
- 塔勒布四部曲之《黑天鹅》
- 智哪儿高端建材市场调研:智能家居产品占几成?结果超出你的想象
- Python3-Flask-微信公众号开发-3
- 第五章 数字滤波器的基本结构之三