vue專案實錄:下拉重新整理元件的開發及slot的使用

2020-10-25 13:00:30

「下拉重新整理」和「上滑載入更多」功能在前端、尤其是行動端專案中非常重要,這裡筆者由曾經做過的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 == 0this.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 事件中,我們主要是做一些動畫執行的操作,大家可以看看程式碼中的註釋,這裡說明一下:

  1. 此時手指離開螢幕,位移量達到臨界值時,並且也有進入下拉重新整理的標誌位,就表明要觸發正在重新整理。此時圓形 icon原地旋轉,並觸發下拉重新整理回撥方法,延遲 700ms 後向上收起。
  2. 我們在實現圓形 icon 時的旋轉和位移動畫時,用了兩個 div,在 touchmove 時,我們主要對外層的 div 也就是 ref=circleIcon,來實現位移和旋轉。
  3. 在 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有三種形式:

  1. 普通插槽
  2. 具名插槽
  3. 作用域插槽

可能我們一般用具名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認證部落格專家 ECMAScript 6 Node.js CSS
江湖人稱「雲小夢」。一個大前端路上還未「畢業」的「小學生」。愛好分享、執著探索、樂於開源;曾參與過中大型微信小程式專案前端開發,並主導過一些官網和個人網站開發;目前著迷於vue、node、css技術。開源並維護有:微信小程式擴充套件元件庫—— https://github.com/1314mxc/yunUI (或:https://codechina.csdn.net/qq_43624878/yunUI),歡迎star! 也曾開源過純前端線上圖片處理工具—— https://github.com/1314mxc/compress ,歡迎體驗!