使用vue怎么在移動(dòng)端實(shí)現(xiàn)一個(gè)下拉刷新功能

這篇文章給大家介紹使用vue怎么在移動(dòng)端實(shí)現(xiàn)一個(gè)下拉刷新功能，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

下拉主要與手指觸摸y軸點(diǎn)有關(guān)

1.記錄下手指按下y軸的坐標(biāo)點(diǎn)

2.記錄手指移動(dòng)時(shí)，移動(dòng)的距離（注意：要判斷手指是向上移還是向下移，向上移就是滾動(dòng)）

3.啟動(dòng)下拉刷新事件

看代碼：

vue中要在methods里面注冊(cè)事件，在綁定到父元素上，這里大家應(yīng)該都是用vue-cli搭建的項(xiàng)目了吧！

沒(méi)有的話(huà)，我回頭給個(gè)鏈接給大家，里面有已經(jīng)搭建好的項(xiàng)目結(jié)構(gòu)。包含這個(gè)插件的源碼，demo都在里面1

<template>
　　<div class="parent">
　　　　<div class="child"></div>
　　</div>
</template>
<script>
export default {
　　data(){
　　　　return {
　　　　　　top: 0,
　　　　　　startY: 0,     // 保存 y軸點(diǎn)的位置
　　　　　　touching: false,  // 代表當(dāng)前是否處于 下拉刷新行為的開(kāi)關(guān)，也就是當(dāng)屬于滾動(dòng)行為時(shí)，就要退出該事件機(jī)制
　　　　}　　
　　},
　　methods: {
　　　　touchStart(e) {
　　　　　　// e代表該事件對(duì)象，e.targetTouches[0].pageY可以拿到手指按下的 y軸點(diǎn)
　　　　　　this.startY = e.targetTouches[0].pageY
　　　　　　// 開(kāi)啟下拉刷新?tīng)顟B(tài)
　　　　　　this.touching = true
　　　　　　
　　　　},
　　　　touchMove(e) {
 　　　　 //這個(gè) touchMove，只要頁(yè)面在動(dòng)都會(huì)發(fā)生的，所以 touching就起作用了
　　　　　　// 如果 touching為false，說(shuō)明這個(gè)正在移動(dòng)的頁(yè)面不是我們想要的下拉刷新，有可能是用戶(hù)隨意拉了一下頁(yè)面而已，或者其他
　　　　　　if(!this.touching) return
　　　　　　// 獲取移動(dòng)的距離
　　　　　　let diff = e.targetToc=uches[0].pageY - this.startY 
　　　　　　//判斷是向上拉還是向下拉 
　　　　　　if(diff >０) { 
　　　　　　　　e.preventDefault()
　　　　　　} else {
　　　　　　　　return 　　
　　　　　　}
　　　　　　//這個(gè)this.top要對(duì)應(yīng)綁定到該元素的transform: translateY(+top+ 'px')上，不然是無(wú)法拉動(dòng)的
　　　　　　// 因此這里還要對(duì)偏移高度做一下處理，直接設(shè)置diff +(this.state === 2 ? 40 : 0) 太快了，因?yàn)槔》忍?
　　　　　　// 讓diff*0.25這樣子就差不多了
　　　　　　　this.top = Math.floor(diff*0.25) + (this.state === 2 ? 40 : 0)
　　　　　　if（this.top >= 40）{
　　　　　　　　this.state = 1  //代表正在拉取
　　　　　　} else {
　　　　　　　　this.state = 0 // 代表初始轉(zhuǎn)態(tài)
　　　　　　}　　　
　　　　}，
　　　　touchEnd(e) {
　　　　　　this.touching = false
　　　　　　if(this.state === 2) {
　　　　　　　　this.top = 40
　　　　　　　　return 
　　　　　　}
　　　　　　// 判斷抬起時(shí)的高度，是大于40 就開(kāi)啟刷新
　　　　　　if(this.top >= 40) {
　　　　　　　　this.refresh()
　　　　　　} else {
　　　　　　　　this.state = 0
　　　　　　　　this.top = 0
　　　　　　}
　　　　},
　　　　refresh() {
　　　　　　this.state = 2
　　　　　　this.top = 40
　　　　　　const self = this
　　　　　　// 這里可以調(diào)用父組件的方法去請(qǐng)求刷新接口
　　　　　　this.$emit('getRefresh', function(self){
　　　　　　　　//傳個(gè)回調(diào)過(guò)去，請(qǐng)求完數(shù)據(jù)就復(fù)原
　　　　　　　　self.state = 0
　　　　　　　　self.top = 0
　　　　　　})
　　　　}
　　}

}
</script>

關(guān)于使用vue怎么在移動(dòng)端實(shí)現(xiàn)一個(gè)下拉刷新功能就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。