当我们在做移动端的时候 ,经常会遇到订单列表或者首页,经常会遇到下拉刷新 ,但是我经常用到 Vant 组件库中的下拉刷新 ,但是Vant 中的下拉刷新 会有一些问题 就是刷新的时候,在将页面象上滑动 ,就会出现卡顿的状态 ,这样就会导致用户体验非常不好 ,偶然看到一个博主写的一篇文章 还挺好用的 我就拿来试一试 真的还可以
1. 首先 我们在 components 下创建一个 pullRefresh.vue 公共文件
<template>
<div
class="weui-pull-refresh"
ref="scrollBox"
:style="style"
@touchstart="touchStart"
@touchmove="touchMove"
@touchend="touchEnd"
>
<div class="weui-pull-refreshing-box">
<div v-if="moveState < 2">
{{ moveState === 0 ? "下拉即可刷新..." : "释放即可刷新..." }}
</div>
<div v-else><i class="weui-loading" /> 加载中...</div>
</div>
<div class="weui-pull-present-box">
<slot />
</div>
</div>
</template>
<script>
export default {
name: "pull-refresh",
data() {
return {
startY: "", //保存touch时的Y坐标
moveDistance: 0, //保存向下滑动的距离
moveState: 0, //开始滑动到结束后状态的变化 0:下拉即可刷新 1:释放即可刷新 2:加载中
duration: 0, //动画持续时间,0就是没有动画
};
},
computed: {
style() {
return {
transition: `${this.duration}ms`,
transform: `translate3d(0,${this.moveDistance}px, 0)`,
};
},
},
methods: {
touchStart(e) {
this.duration = 0; // 关闭动画
this.moveDistance = 0; // 滑动距离归0
this.startY = e.targetTouches[0].clientY; // 获得开始Y坐标
},
touchMove(e) {
//这里是整个下拉刷新的核心
let scrollTop =
document.documentElement.scrollTop || document.body.scrollTop;
//首先判断我们有没有滚动条,如果有,我们下拉刷新就不能启用。
if (scrollTop > 0) return;
let move = e.targetTouches[0].clientY - this.startY;
//判断手指滑动的距离,只有为正数才代表用户下拉了。
if (move > 0) {
//阻止默认事件,在微信浏览器中尤为有用,至于为什么,你去试就知道了。
e.preventDefault();
//增加滑动阻力的感觉
this.moveDistance = Math.pow(move, 0.8);
if (this.moveDistance > 50) {
//如果滑动距离大于50 那我就告诉你,释放即可刷新
if (this.moveState === 1) return;
this.moveState = 1;
} else {
//否则 恢复原样
if (this.moveState === 0) return;
this.moveState = 0;
}
}
},
touchEnd(e) {
// 只要手指拿开,我都需要加上结束时的动画,这里为300ms
this.duration = 300;
if (this.moveDistance > 50) {
//这里逻辑跟touchMove一样,但是需要真的加载数据了,那moveState变为2 所以加载动画在这出现
this.moveState = 2;
//因为还没加载完,我得让加载动画显示着,所以这里移动距离为50
this.moveDistance = 50;
this.$emit("refresh", () => {
//这里就是成功后的回调了,如果该函数被调用,那就以为着加载数据完成,所以状态要回到0,当然需要在父组件调用。
this.moveState = 0;
});
} else {
//否则 给我老老实实恢复原样
this.moveDistance = 0;
}
},
},
watch: {
//这里是给用户操作返回的核心
moveState(state) {
//我们监听moveState的状态,
//0意味着开始也意味着结束,这里是结束,并且只有动画生效我们才能 moveDistance 设为0,
//为什么动画生效才行,因为动画生效意味着手指离开了屏幕,如果不懂去看touchEnd方法,这时
//我们让距离变为0才会有动画效果。
if (state === 0 && this.duration === 300) {
this.moveDistance = 0;
}
},
},
};
</script>
<!-- css我就不讲了,你肯定比我厉害 -->
<style scoped lang="scss">
.weui-pull-refresh {
display: flex;
height: calc(100vh - 5px);
flex-direction: column;
margin-top: -50px;
.weui-pull-refreshing-box {
line-height: 50px;
height: 50px;
font-size: 14px;
color: rgba(69, 90, 100, 0.6);
text-align: center;
margin-bottom: 20px;
}
.weui-pull-present-box {
background-color: lighten(#fff, 10%);
}
}
</style>
2. 我们在 main.js 中 进行全局的注册和引入 这样就不会在 每个页面中 都要引入了
import pullRefresh from '@/components/pullRefresh'
Vue.component('pull-refresh',pullRefresh)
3. 我们创建一个 Scroll.vue 文件夹
<template>
<pull-refresh @refresh="refresh">
<div class="content">
<p class="text">基础用法</p>
刷新次数:{{ num }}
</div>
</pull-refresh>
</template>
<script>
export default {
data() {
return {
num: 0,
};
},
methods: {
refresh(done) {
setTimeout(() => {
this.num++;
done(); //我就想说这里,把状态归0
}, 500);
},
},
};
</script>
<style scoped lang="scss">
.content {
padding: 0 15px;
.text {
font-size: 14px;
color: rgba(69, 90, 100, 0.6);
}
}
</style>
这样就可以实现下拉刷新了