<template>　　<div class="parent">　　　　<div class="child"></div>　　</div></template><script>export default {　　data(){　　　　return {　　　　　　top: 0,　　　　　　startY: 0,     // 保存 y軸點的位置　　　　　　touching: false,  // 代表當前是否處于 下拉刷新行為的開關，也就是當屬于滾動行為時，就要退出該事件機制　　　　}　　　　},　　methods: {　　　　touchStart(e) {　　　　　　// e代表該事件對象，e.targetTouches[0].pageY可以拿到手指按下的 y軸點　　　　　　this.startY = e.targetTouches[0].pageY　　　　　　// 開啟下拉刷新狀態　　　　　　this.touching = true　　　　　　　　　　},　　　　touchMove(e) { 　　　　 //這個 touchMove，只要頁面在動都會發生的，所以 touching就起作用了　　　　　　// 如果 touching為false，說明這個正在移動的頁面不是我們想要的下拉刷新，有可能是用戶隨意拉了一下頁面而已，或者其他　　　　　　if(!this.touching) return　　　　　　// 獲取移動的距離　　　　　　let diff = e.targetToc=uches[0].pageY - this.startY 　　　　　　//判斷是向上拉還是向下拉 　　　　　　if(diff >０) { 　　　　　　　　e.preventDefault()　　　　　　} else {　　　　　　　　return 　　　　　　　　}　　　　　　//這個this.top要對應綁定到該元素的transform: translateY(+top+ 'px')上，不然是無法拉動的　　　　　　// 因此這里還要對偏移高度做一下處理，直接設置diff +(this.state === 2 ? 40 : 0) 太快了，因為拉取幅度太大　　　　　　// 讓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 // 代表初始轉態　　　　　　}　　　　　　　}，　　　　touchEnd(e) {　　　　　　this.touching = false　　　　　　if(this.state === 2) {　　　　　　　　this.top = 40　　　　　　　　return 　　　　　　}　　　　　　// 判斷抬起時的高度，是大于40 就開啟刷新　　　　　　if(this.top >= 40) {　　　　　　　　this.refresh()　　　　　　} else {　　　　　　　　this.state = 0　　　　　　　　this.top = 0　　　　　　}　　　　},　　　　refresh() {　　　　　　this.state = 2　　　　　　this.top = 40　　　　　　const self = this　　　　　　// 這里可以調用父組件的方法去請求刷新接口　　　　　　this.$emit('getRefresh', function(self){　　　　　　　　//傳個回調過去，請求完數據就復原　　　　　　　　self.state = 0　　　　　　　　self.top = 0　　　　　　})　　　　}　　}}</script>