「下拉重新整理」和「上滑載入更多」功能在前端、尤其是行動端專案中非常重要,這裡筆者由曾經做過的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
來判斷。監聽 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 事件中,我們主要是做一些動畫執行的操作,大家可以看看程式碼中的註釋,這裡說明一下:
最後,我們看下【data】中都有什麼:
data(){
return{
pullRefresh:{
dragStart:null, //開始抓取標誌位
percentage:0, //拖動量(百分比)
dragThreshold:0.3, //臨界值
moveCount:200, //位移係數,可以調節圓形圖片icon的運動速率
joinRefreshFlag:null, //進入重新整理狀態的標誌位(true)
}
}
},
<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>
所以這裡這樣做,就是為了在「父元件」中呼叫時讓「下拉的動畫」更自然,但又不會增加一個檔案的負擔。