vue下拉刷新組件的開發(fā)及slot的使用詳解
“下拉刷新”和“上滑加載更多”功能在前端、尤其是移動(dòng)端項(xiàng)目中非常重要，這里筆者由曾經(jīng)做過(guò)的vue項(xiàng)目中的“blink”功能和各位探討下【下拉刷新】組件的開發(fā)：
正式開篇
在前端項(xiàng)目的 components 文件夾下新建 pullRefreshView 文件夾，在其中新建組件 index.vue：（它代表“整個(gè)屏幕”，通過(guò)slot插入頁(yè)面其他內(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>
上面代碼中，最外層使用了一個(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 基本編寫完畢，接下來(lái)就要綁定事件了，通過(guò)上述分析，加上我們之前章節(jié)開發(fā)圖片查看器的原理，我們需要用到移動(dòng)端 touchstart，touchmove，touchend 事件，可以實(shí)現(xiàn)下拉刷新效果。
首先，監(jiān)聽 touchstart 事件：
touchstart(evt){
this.pullRefresh.dragStart=evt.targetTouches[0].clientY
this.$refs.circleIcon.style.webkitTransition='none'
},
在 touchstart 事件中，我們主要做的是記錄一些初始值，包括手指第一次接觸屏幕時(shí)的位置，然后將圓形 icon 的動(dòng)畫效果先隱藏。
然后，監(jiān)聽 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à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)。
- 直到手指離開屏幕前，都不會(huì)觸發(fā)下拉刷新，只是圓形 icon.circleIcon 在不停的上下移動(dòng)。
監(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=null
this.pullRefresh.dragStart=null
this.pullRefresh.percentage=0
}
在 touchend 事件中，我們主要是做一些動(dòng)畫執(zhí)行的操作，大家可以看看代碼中的注釋，這里說(shuō)明一下：
- 此時(shí)手指離開屏幕，位移量達(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)畫時(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)畫，因?yàn)闊o(wú)法給一個(gè) div 同時(shí)使用位移旋轉(zhuǎn)和 animation 動(dòng)畫，所以這里一個(gè)技巧就是給父元素設(shè)置位移和旋轉(zhuǎn)，它的子元素在不設(shè)置任何 CSS 動(dòng)畫樣式時(shí)，是會(huì)隨著父元素而生效的。
最后，我們看下【data】中都有什么：
data(){
return{
pullRefresh:{
dragStart:null, //開始抓取標(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à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> <h2>我是子組件</h2> <slot>只有在沒(méi)有內(nèi)容分發(fā)的情況下這句話才會(huì)出現(xiàn)</slot> </div>
父組件模板：
<div> <h1>這是父組件地盤</h1> <my-component> <p>這是一些初始內(nèi)容</p> <p>這是更多的內(nèi)容</p> </my-component> </div>
最后就會(huì)被渲染成這樣：
<div> <h1>這是父組件地盤</h1> <div> <h2>我是子組件</h2> <p>這是一些初始內(nèi)容</p> <p>這是更多的內(nèi)容</p> </div> </div>
所以這里這樣做，就是為了在“父組件”中調(diào)用時(shí)讓“下拉的動(dòng)畫”更自然，但又不會(huì)增加一個(gè)文件的負(fù)擔(dān)。
到此這篇關(guān)于vue下拉刷新組件的開發(fā)及slot的使用詳解的文章就介紹到這了,更多相關(guān)vue下拉刷新組件slot使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了如何在前端項(xiàng)目中使用terser-webpack-plugin插件來(lái)刪除代碼中的console.log語(yǔ)句,以避免在正式環(huán)境中輸出調(diào)試信息,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-02-02
vue如何根據(jù)不同的環(huán)境使用不同的接口地址
這篇文章主要介紹了vue如何根據(jù)不同的環(huán)境使用不同的接口地址問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue如何優(yōu)雅的使用全局WebSocket問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue實(shí)現(xiàn)在頁(yè)面上添加水印的示例代碼
這篇文章主要給大家介紹一下vue實(shí)現(xiàn)在頁(yè)面上添加水印的實(shí)例,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價(jià)值,感興趣的小伙伴跟著小編一起來(lái)看看吧2023-12-12
本文主要介紹了Vue3中使用vuex4的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
如何使用Webstorm和Chrome來(lái)調(diào)試Vue項(xiàng)目
這篇文章主要介紹了如何使用Webstorm和Chrome來(lái)調(diào)試Vue項(xiàng)目，對(duì)Vue感興趣的同學(xué)，一定要看一下2021-05-05
Vite結(jié)合whistle實(shí)現(xiàn)一勞永逸開發(fā)環(huán)境代理方案
這篇文章主要為大家介紹了Vite結(jié)合whistle實(shí)現(xiàn)一勞永逸開發(fā)環(huán)境代理方案，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
Vue.js（讀音 /vjuː/, 類似于 view） 是一套構(gòu)建用戶界面的漸進(jìn)式框架。與其他重量級(jí)框架不同的是，Vue 采用自底向上增量開發(fā)的設(shè)計(jì)。這篇文章主要介紹了VueJS全面解析的相關(guān)資料,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了vue中的ref和$refs的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
vue-mounted中如何處理data數(shù)據(jù)
這篇文章主要介紹了vue-mounted中如何處理data數(shù)據(jù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03