“下拉刷新”和“上滑加載更多”功能在前端項目,尤其是移動端項目中非常重要,本節我們先來看下【下拉刷新】組件的開發:
正式開篇
在前端項目的 components 文件夾下新建 pullRefreshView 文件夾,同時新建組件的 index.vue:
首先需要編寫下拉刷新組件的 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){
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, //進入刷新狀態的標誌位
}
}
},
補充: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>
所以這裏這樣做,就是爲了在“父組件”中調用時讓“下拉的動畫”更自然,但又不會增加一個文件的負擔。