您好,登錄后才能下訂單哦!
這篇文章給大家介紹使用vue怎么開(kāi)發(fā)一個(gè)下拉刷新組件,內(nèi)容非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對(duì)大家能有所幫助。
“下拉刷新”和“上滑加載更多”功能在前端、尤其是移動(dòng)端項(xiàng)目中非常重要,這里筆者由曾經(jīng)做過(guò)的vue項(xiàng)目中的“blink”功能和各位探討下【下拉刷新】組件的開(kāi)發(fā):
在前端項(xiàng)目的 components 文件夾下新建 pullRefreshView 文件夾,在其中新建組件 index.vue:(它代表“整個(gè)屏幕”,通過(guò)slot插入頁(yè)面其他內(nèi)容而不是傳統(tǒng)的設(shè)置遮罩層觸發(fā)下拉刷新)
首先需要編寫(xiě)下拉刷新組件的 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>
上面代碼中,最外層使用了一個(gè) div 用來(lái)包裹,作為事件綁定的容器,同時(shí)新建一個(gè)圓形 icon 的 div .circleIcon,我們將此 icon 樣式設(shè)置在屏幕外,達(dá)到隱藏的效果,代碼如下:
<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 基本編寫(xiě)完畢,接下來(lái)就要綁定事件了,通過(guò)上述分析,加上我們之前章節(jié)開(kāi)發(fā)圖片查看器的原理,我們需要用到移動(dòng)端 touchstart,touchmove,touchend 事件,可以實(shí)現(xiàn)下拉刷新效果。
首先,監(jiān)聽(tīng) touchstart 事件:
touchstart(evt){ this.pullRefresh.dragStart=evt.targetTouches[0].clientY this.$refs.circleIcon.style.webkitTransition='none' },
在 touchstart 事件中,我們主要做的是記錄一些初始值,包括手指第一次接觸屏幕時(shí)的位置,然后將圓形 icon 的動(dòng)畫(huà)效果先隱藏。
然后,監(jiān)聽(tīng) touchmove 事件:
touchmove(evt){ if(this.pullRefresh.dragStart===null){ return } let target=evt.targetTouches[0] // 向上滑為正,向下拉為負(fù) 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對(duì)象(下方有),而evt即事件event參數(shù) 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 事件里,我們主要做的是根據(jù)手指移動(dòng)的量來(lái)實(shí)時(shí)將圓形 icon 移動(dòng)并旋轉(zhuǎn),這里有幾點(diǎn)確實(shí)要說(shuō)明一下:
我們的下拉刷新觸發(fā)的時(shí)機(jī)是在頁(yè)面處于屏幕頂部并且手指向下拖動(dòng),這兩個(gè)條件,缺一不可,在代碼中,我們利用 scrollTop == 0
和this.pullRefresh.percentage < 0
來(lái)判斷。
在進(jìn)入下拉刷新?tīng)顟B(tài)時(shí),此時(shí)手指不斷向下拖動(dòng),首先圓形 icon.circleIcon 會(huì)向下滾動(dòng)并旋轉(zhuǎn),當(dāng)滾動(dòng)到臨界值時(shí)就只原地旋轉(zhuǎn)。
如果手指在向上拖動(dòng),圓形 icon.circleIcon 就會(huì)向上滾動(dòng)并旋轉(zhuǎn)。
直到手指離開(kāi)屏幕前,都不會(huì)觸發(fā)下拉刷新,只是圓形 icon.circleIcon 在不停的上下移動(dòng)。
監(jiān)聽(tīng) 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 事件中,我們主要是做一些動(dòng)畫(huà)執(zhí)行的操作,大家可以看看代碼中的注釋?zhuān)@里說(shuō)明一下:
此時(shí)手指離開(kāi)屏幕,位移量達(dá)到臨界值時(shí),并且也有進(jìn)入下拉刷新的標(biāo)志位,就表明要觸發(fā)正在刷新。此時(shí)圓形 icon原地旋轉(zhuǎn),并觸發(fā)下拉刷新回調(diào)方法,延遲 700ms 后向上收起。
我們?cè)趯?shí)現(xiàn)圓形 icon 時(shí)的旋轉(zhuǎn)和位移動(dòng)畫(huà)時(shí),用了兩個(gè) div,在 touchmove 時(shí),我們主要對(duì)外層的 div 也就是 ref=circleIcon,來(lái)實(shí)現(xiàn)位移和旋轉(zhuǎn)。
在 touchend 時(shí),我們主要給內(nèi)層的 div 也就是 ref=circleIconInner 來(lái)加 animation 動(dòng)畫(huà),因?yàn)闊o(wú)法給一個(gè) div 同時(shí)使用位移旋轉(zhuǎn)和 animation 動(dòng)畫(huà),所以這里一個(gè)技巧就是給父元素設(shè)置位移和旋轉(zhuǎn),它的子元素在不設(shè)置任何 CSS 動(dòng)畫(huà)樣式時(shí),是會(huì)隨著父元素而生效的。
最后,我們看下【data】中都有什么:
data(){ return{ pullRefresh:{ dragStart:null, //開(kāi)始抓取標(biāo)志位 percentage:0, //拖動(dòng)量(百分比) dragThreshold:0.3, //臨界值 moveCount:200, //位移系數(shù),可以調(diào)節(jié)圓形圖片icon的運(yùn)動(dòng)速率 joinRefreshFlag:null, //進(jìn)入刷新?tīng)顟B(tài)的標(biāo)志位(true) } } },
補(bǔ)充:slot
<template>
中為什么有<slot>
?
slot有三種形式:
普通插槽
具名插槽
作用域插槽
可能我們一般用具名slot的時(shí)候比較多,但是第一種也格外好用——正因?yàn)樗鼪](méi)有名字,所以引用這個(gè)組件的另一個(gè)組件中包裹其中的所有內(nèi)容都?xì)w這個(gè)slot所有:
假定my-component組件中有如下模板:
<div> <h3>我是子組件</h3> <slot>只有在沒(méi)有內(nèi)容分發(fā)的情況下這句話才會(huì)出現(xiàn)</slot> </div>
父組件模板:
<div> <h2>這是父組件地盤(pán)</h2> <my-component> <p>這是一些初始內(nèi)容</p> <p>這是更多的內(nèi)容</p> </my-component> </div>
最后就會(huì)被渲染成這樣:
<div> <h2>這是父組件地盤(pán)</h2> <div> <h3>我是子組件</h3> <p>這是一些初始內(nèi)容</p> <p>這是更多的內(nèi)容</p> </div> </div>
所以這里這樣做,就是為了在“父組件”中調(diào)用時(shí)讓“下拉的動(dòng)畫(huà)”更自然,但又不會(huì)增加一個(gè)文件的負(fù)擔(dān)。
關(guān)于使用vue怎么開(kāi)發(fā)一個(gè)下拉刷新組件就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。