原理
想必使用过微信开发工具的应该都接触过上拉加载下拉刷新配置。
原理呢就是通过根据当前刚开始触碰的屏幕垂直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 something
console.log(value);
},
PullDownHandle(value){
// do something
console.log(value);
},
clickHandle(){
console.log(111);
}
}
}
</script>
<style lang="less" scoped>
.home {
width: 100%;
height: 100%;
}
</style>
子集组件
<template>
<div
class="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:{
// 父级组件传过来的下拉需求尺寸，默认100
type:Number,
default:100
},
PullUpSize:{
// 父级组件传过来的上拉需求尺寸，默认100
type: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 = 0
this.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>
效果
添加上loading样式
