原理

想必使用过微信开发工具的应该都接触过上拉加载下拉刷新配置。
在这里插入图片描述
原理呢就是通过根据当前刚开始触碰的屏幕垂直y轴距离和滑动时所触碰垂直y轴距离，从而来判断是上拉，下拉。

实现

使用的vue2 封装的组件，js大致思路是一样的

父组件

<template><div class="home"><pull-down-refresh:showLoadingRefresh="true":PullDownSize="100":PullUpSize="100"@PullUpHandle="PullUpHandle" @PullDownHandle="PullDownHandle"><!-- 在组件的代码区域会触发下拉上拉操作 --><h2>example</h2><button @click="clickHandle">BUTTON</button></pull-down-refresh></div>
</template><script>
// 引入下拉组件
import PullDownRefresh from '../components/PullDownRefresh.vue'
export default {name: 'Home',components:{ PullDownRefresh },data(){return {}},methods:{PullUpHandle(value){// do somethingconsole.log(value);},PullDownHandle(value){// do somethingconsole.log(value);},clickHandle(){console.log(111);}}
}
</script><style lang="less" scoped>.home {width: 100%;height: 100%;}
</style>

子组件

<template><divclass="pull-down-refresh"@touchstart="startHandle"@touchmove="moveHandle"@touchend="endHandle"><!-- <transition><div :class="[isShowLoading?'h':'','loading-refresh']" v-show="isShowLoading"><img src="../assets/loading.png"></div></transition> --><!-- slot插槽 在内部可执行的代码块 --><slot></slot></div>
</template><script>
export default {name: "PullDownRefresh",props:{PullDownSize:{ // 父级组件传过来的下拉需求尺寸，默认100type:Number,default:100},PullUpSize:{ // 父级组件传过来的上拉需求尺寸，默认100type:Number,default:100},// showLoadingRefresh:{//   type:Boolean,//   default:false// }},data(){return {isPullDown:false, // 判断是否是下拉操作startY:'', // 开始触摸的距离尺寸resultY:'', // 最终的距离尺寸 = 开始尺寸 - 移动移动，小于0位下拉，大于0位上拉// isShowLoading:false,  // loading 动画是否展示}},methods: {startHandle(e) {// 每开始的第一次触碰，记录初始的垂直距离尺寸this.startY = e.touches[0].clientY},moveHandle(e) {// 触摸滑动的时候用来计算最终的距离尺寸this.resultY = this.startY - e.touches[0].clientY// 上拉 ————> 最终的距离是大于0的，最初距离 - 向上滑动的距离 > 0 ，向上滑动的时候尺寸距离比原来的尺寸距离要小// 下拉 ————> 反之。向下滑动的尺寸比原来的尺寸大if(this.resultY > 0){this.isPullDown = false  // pull up}else {this.isPullDown = true  // pull down}},endHandle() {if(!this.resultY){ // 判断最终的距离尺寸是否不成立不存在return}// 判断当前是否为下拉，为false是上拉操作，并且判断是否满足对于上拉的需求尺寸条件，满足条件执行if(this.isPullDown == false && this.resultY >= this.PullUpSize){this.$emit('PullUpHandle','你好我...，我正在触发上拉加载操作')}// 下拉的尺寸是<0的，通过绝对值 Math.abs(this.resultY) 将原来的最终尺寸与需求尺寸对比if(this.isPullDown && Math.abs(this.resultY) >= this.PullDownSize) {this.$emit('PullDownHandle','你好我...，我正在触发下拉刷新操作')// if(this.showLoadingRefresh){//   this.isShowLoading = true//   setTimeout(() => {//     this.isShowLoading = false//   },500)// }}this.resultY = 0this.isPullDown = false// 最终再将其复位},},
};
</script><style scoped>
.pull-down-refresh {width: 100%;height: 100%;overflow: hidden;
}
.loading-refresh {width: 100%;height: 0px;background: #ccc;display: flex;justify-content: center;align-items: center;transition: all .5s linear;
}
.loading-refresh img {height: 100%;width: auto;transform: scale(.6);
}
.h {height: 40px;
}
.v-enter,.v-leave-to{opacity: 0;/* transform: translateX(80px); */}.v-enter-active,.v-leave-active{transition: all 0.5S ease}
</style>