“下拉刷新”和“上滑加載更多”功能在前端、尤其是移動端項目中非常重要，這里筆者由曾經(jīng)做過的vue項目中的“blink”功能和各位探討下【下拉刷新】組件的開發(fā)：

JavaScript正式開篇

在前端項目的 components 文件夾下新建 pullRefreshView 文件夾，在其中新建組件 index.vue：（它代表“整個屏幕”，通過slot插入頁面其他內(nèi)容而不是傳統(tǒng)的設(shè)置遮罩層觸發(fā)下拉刷新）

首先需要編寫下拉刷新組件的 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 樣式設(shè)置在屏幕外，達到隱藏的效果，代碼如下：

<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 基本編寫完畢，接下來就要綁定事件了，通過上述分析，加上我們之前章節(jié)開發(fā)圖片查看器的原理，我們需要用到移動端 touchstart，touchmove，touchend 事件，可以實現(xiàn)下拉刷新效果。

首先，監(jiān)聽 touchstart 事件：

touchstart(evt){this.pullRefresh.dragStart=evt.targetTouches[0].clientYthis.$refs.circleIcon.style.webkitTransition='none' },

在 touchstart 事件中，我們主要做的是記錄一些初始值，包括手指第一次接觸屏幕時的位置，然后將圓形 icon 的動畫效果先隱藏。

然后，監(jiān)聽 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參數(shù)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 事件里，我們主要做的是根據(jù)手指移動的量來實時將圓形 icon 移動并旋轉(zhuǎn)，這里有幾點確實要說明一下：

• 我們的下拉刷新觸發(fā)的時機是在頁面處于屏幕頂部并且手指向下拖動，這兩個條件，缺一不可，在代碼中，我們利用 scrollTop == 0和this.pullRefresh.percentage < 0 來判斷。
• 在進入下拉刷新狀態(tài)時，此時手指不斷向下拖動，首先圓形 icon.circleIcon 會向下滾動并旋轉(zhuǎn)，當滾動到臨界值時就只原地旋轉(zhuǎn)。
• 如果手指在向上拖動，圓形 icon.circleIcon 就會向上滾動并旋轉(zhuǎn)。
• 直到手指離開屏幕前，都不會觸發(fā)下拉刷新，只是圓形 icon.circleIcon 在不停的上下移動。

監(jiān)聽 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 事件中，我們主要是做一些動畫執(zhí)行的操作，大家可以看看代碼中的注釋，這里說明一下：

此時手指離開屏幕，位移量達到臨界值時，并且也有進入下拉刷新的標志位，就表明要觸發(fā)正在刷新。此時圓形 icon原地旋轉(zhuǎn)，并觸發(fā)下拉刷新回調(diào)方法，延遲 700ms 后向上收起。

我們在實現(xiàn)圓形 icon 時的旋轉(zhuǎn)和位移動畫時，用了兩個 div，在 touchmove 時，我們主要對外層的 div 也就是 ref=circleIcon，來實現(xiàn)位移和旋轉(zhuǎn)。

在 touchend 時，我們主要給內(nèi)層的 div 也就是 ref=circleIconInner 來加 animation 動畫，因為無法給一個 div 同時使用位移旋轉(zhuǎn)和 animation 動畫，所以這里一個技巧就是給父元素設(shè)置位移和旋轉(zhuǎn)，它的子元素在不設(shè)置任何 CSS 動畫樣式時，是會隨著父元素而生效的。

最后，我們看下【data】中都有什么：

data(){return{pullRefresh:{dragStart:null, //開始抓取標志位percentage:0, //拖動量(百分比)dragThreshold:0.3, //臨界值moveCount:200, //位移系數(shù)，可以調(diào)節(jié)圓形圖片icon的運動速率joinRefreshFlag:null, //進入刷新狀態(tài)的標志位（true）}} },

補充：slot

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

slot有三種形式：

普通插槽

具名插槽

作用域插槽

可能我們一般用具名slot的時候比較多，但是第一種也格外好用——正因為它沒有名字，所以引用這個組件的另一個組件中包裹其中的所有內(nèi)容都歸這個slot所有：

假定my-component組件中有如下模板：

<div><h2>我是子組件</h2><slot>只有在沒有內(nèi)容分發(fā)的情況下這句話才會出現(xiàn)</slot> </div>

父組件模板：

<div><h1>這是父組件地盤</h1><my-component><p>這是一些初始內(nèi)容</p><p>這是更多的內(nèi)容</p></my-component> </div>

最后就會被渲染成這樣：

<div> <h1>這是父組件地盤</h1><div> <h2>我是子組件</h2><p>這是一些初始內(nèi)容</p><p>這是更多的內(nèi)容</p></div> </div>

所以這里這樣做，就是為了在“父組件”中調(diào)用時讓“下拉的動畫”更自然，但又不會增加一個文件的負擔。

————————————————

版權(quán)聲明：本文為CSDN博主「行舟客」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。

原文鏈接：

vue項目實錄：下拉刷新組件的開發(fā)及slot的使用_flying meng的菜鳥居-CSDN博客?blog.csdn.net

總結(jié)

以上是生活随笔為你收集整理的android下拉刷新动画效果代码_vue项目实录：下拉刷新组件的开发及slot的使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。