vue下拉刷新組件的開發(fā)及slot的使用詳解
“下拉刷新”和“上滑加載更多”功能在前端、尤其是移動端項目中非常重要，這里筆者由曾經(jīng)做過的vue項目中的“blink”功能和各位探討下【下拉刷新】組件的開發(fā)：
正式開篇
在前端項目的 components 文件夾下新建 pullRefreshView 文件夾，在其中新建組件 index.vue：（它代表“整個屏幕”，通過slot插入頁面其他內(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>
上面代碼中，最外層使用了一個 div 用來包裹，作為事件綁定的容器，同時新建一個圓形 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 基本編寫完畢，接下來就要綁定事件了，通過上述分析，加上我們之前章節(jié)開發(fā)圖片查看器的原理，我們需要用到移動端 touchstart，touchmove，touchend 事件，可以實現(xiàn)下拉刷新效果。
首先，監(jiān)聽 touchstart 事件：
touchstart(evt){
this.pullRefresh.dragStart=evt.targetTouches[0].clientY
this.$refs.circleIcon.style.webkitTransition='none'
},
在 touchstart 事件中，我們主要做的是記錄一些初始值，包括手指第一次接觸屏幕時的位置，然后將圓形 icon 的動畫效果先隱藏。
然后，監(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對象（下方有），而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ù)手指移動的量來實時將圓形 icon 移動并旋轉(zhuǎn)，這里有幾點確實要說明一下：
- 我們的下拉刷新觸發(fā)的時機是在頁面處于屏幕頂部并且手指向下拖動，這兩個條件，缺一不可，在代碼中，我們利用
scrollTop == 0和this.pullRefresh.percentage < 0來判斷。 - 在進入下拉刷新狀態(tài)時，此時手指不斷向下拖動，首先圓形 icon.circleIcon 會向下滾動并旋轉(zhuǎn)，當(dāng)滾動到臨界值時就只原地旋轉(zhuǎn)。
- 如果手指在向上拖動，圓形 icon.circleIcon 就會向上滾動并旋轉(zhuǎn)。
- 直到手指離開屏幕前，都不會觸發(fā)下拉刷新，只是圓形 icon.circleIcon 在不停的上下移動。
監(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 事件中，我們主要是做一些動畫執(zhí)行的操作，大家可以看看代碼中的注釋，這里說明一下：
- 此時手指離開屏幕，位移量達(dá)到臨界值時，并且也有進入下拉刷新的標(biāo)志位，就表明要觸發(fā)正在刷新。此時圓形 icon原地旋轉(zhuǎn)，并觸發(fā)下拉刷新回調(diào)方法，延遲 700ms 后向上收起。
- 我們在實現(xiàn)圓形 icon 時的旋轉(zhuǎn)和位移動畫時，用了兩個 div，在 touchmove 時，我們主要對外層的 div 也就是 ref=circleIcon，來實現(xiàn)位移和旋轉(zhuǎn)。
- 在 touchend 時，我們主要給內(nèi)層的 div 也就是 ref=circleIconInner 來加 animation 動畫，因為無法給一個 div 同時使用位移旋轉(zhuǎn)和 animation 動畫，所以這里一個技巧就是給父元素設(shè)置位移和旋轉(zhuǎn)，它的子元素在不設(shè)置任何 CSS 動畫樣式時，是會隨著父元素而生效的。
最后，我們看下【data】中都有什么：
data(){
return{
pullRefresh:{
dragStart:null, //開始抓取標(biāo)志位
percentage:0, //拖動量(百分比)
dragThreshold:0.3, //臨界值
moveCount:200, //位移系數(shù)，可以調(diào)節(jié)圓形圖片icon的運動速率
joinRefreshFlag:null, //進入刷新狀態(tài)的標(biāo)志位（true）
}
}
},
補充：slot
<template>中為什么有<slot>？
slot有三種形式：
- 普通插槽
- 具名插槽
- 作用域插槽
可能我們一般用具名slot的時候比較多，但是第一種也格外好用——正因為它沒有名字，所以引用這個組件的另一個組件中包裹其中的所有內(nèi)容都?xì)w這個slot所有：
假定my-component組件中有如下模板：
<div> <h2>我是子組件</h2> <slot>只有在沒有內(nèi)容分發(fā)的情況下這句話才會出現(xiàn)</slot> </div>
父組件模板：
<div> <h1>這是父組件地盤</h1> <my-component> <p>這是一些初始內(nèi)容</p> <p>這是更多的內(nèi)容</p> </my-component> </div>
最后就會被渲染成這樣：
<div> <h1>這是父組件地盤</h1> <div> <h2>我是子組件</h2> <p>這是一些初始內(nèi)容</p> <p>這是更多的內(nèi)容</p> </div> </div>
所以這里這樣做，就是為了在“父組件”中調(diào)用時讓“下拉的動畫”更自然，但又不會增加一個文件的負(fù)擔(dān)。
到此這篇關(guān)于vue下拉刷新組件的開發(fā)及slot的使用詳解的文章就介紹到這了,更多相關(guān)vue下拉刷新組件slot使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解vue + vuex + directives實現(xiàn)權(quán)限按鈕的思路
這篇文章主要介紹了詳解vue + vuex + directives實現(xiàn)權(quán)限按鈕的思路，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
vue動態(tài)路由:路由參數(shù)改變,視圖不更新問題的解決
今天小編就為大家分享一篇vue動態(tài)路由:路由參數(shù)改變,視圖不更新問題的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
最近在vue中安裝Three.js,無聊順便研究一些關(guān)于3D圖形化庫,下面這篇文章主要給大家介紹了關(guān)于vue+threejs寫物體動畫之物體縮放動畫效果的相關(guān)資料,需要的朋友可以參考下2022-10-10
本文主要介紹了基于Vue3的全屏拖拽上傳組件，其實思路上與其他拖拽上傳組件基本一樣,都是指定一個區(qū)域可拖拽,然后讀取文件在上傳，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-09-09
這篇文章主要介紹了vue如何實現(xiàn)自定義底部菜單欄,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了vue中如何添加百度統(tǒng)計代碼，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
一文詳解vue各種權(quán)限控制與管理實現(xiàn)思路
這篇文章主要為大家介紹了vue各種權(quán)限控制與管理的實現(xiàn)思路詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
vue中this.$http.post()跨域和請求參數(shù)丟失的解決
這篇文章主要介紹了vue中this.$http.post()跨域和請求參數(shù)丟失的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue實現(xiàn)導(dǎo)出Excel表格文件提示“文件已損壞無法打開”的解決方法
xlsx用于讀取解析和寫入Excel文件的JavaScript庫,它提供了一系列的API處理Excel文件,使用該庫,可以將數(shù)據(jù)轉(zhuǎn)換Excel文件并下載到本地,適用于在前端直接生成Excel文件,這篇文章主要介紹了Vue實現(xiàn)導(dǎo)出Excel表格,提示文件已損壞,無法打開的解決方法,需要的朋友可以參考下2024-01-01
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)商品放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09