之前写了上拉加载,当然也就有下拉刷新。下拉刷新在web项目中使用会比上拉加载少。这边补充两点:
1、上拉加载和下拉刷新最大意义是说明原理;
2、全局注册往往是不够理想的。比如,如果你使用一个像 webpack 这样的构建系统,全局注册所有的组件意味着即便你已经不再使用一个组件了,它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。
下拉刷新原理:
监听touchStart、touchMove、touchEnd,当手指触碰的时候,记录当前位置,然后移动的时候判断,滚动条为0,且移动的距离(当前pageY减去初始触碰的pageY)大于0小于设定的某个值的时候,让加载动画的高度等于移动的距离。移动结束的时候,判断是否大于某个高度,大于就触发刷新方法。
<template>
<div class="" id="refresh"
@touchstart="touchStart($event)"
@touchmove="touchMove($event)"
@touchend="touchEnd($event)">
<div :style="{'height': loadShowHeight + 'px'}" style="overflow: hidden">
<slot name="load"></slot>
</div>
<slot name="content"></slot>
</div>
</template>
<script>
export default {
props: ['loadMaxHeight', 'loadMinHeight', 'refresh', 'refreshEnd'],
data() {
return {scrollTop: 0, startY: 0, loadShowHeight: 0}
},
components: {}, mounted() {
this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
},
methods: {
touchStart(e) {
this.startY = e.targetTouches[0].pageY;
},
touchMove(e) {
if (this.scrollTop == 0) {
let moveDistance = e.targetTouches[0].pageY - this.startY;
if (moveDistance > 0 && moveDistance <= (this.loadMaxHeight || 30)) {
this.loadShowHeight = moveDistance;
};
};
},
touchEnd() {
if (this.loadShowHeight >= (this.loadMinHeight || 20)) {
this.$emit('refresh', false);
} else {
this.loadShowHeight = 0;
};
},
},
watch: {
refreshEnd(val) {
if (val) {
this.loadShowHeight = 0;
};
}
}
}
</script>
使用:
<template>
<div class="">
<w-scroll-down loadMaxHeight="80" loadMinHeight="40" @refresh="refresh" :refreshEnd="freshFlag">
<div slot="load" style="line-height: 30px;color: red"> {{loadMsg}}</div>
<div slot="content">
<div style="width: 30px;height: 200px;background: #5fff36"></div>
<div style="width: 30px;height: 200px;background: #fdff62"></div>
<div style="width: 30px;height: 200px;background: #ff46a9"></div>
<div style="width: 30px;height: 200px;background: #ff8938"></div>
<div style="width: 30px;height: 200px;background: #677eff"></div>
</div>
</w-scroll-down>
</div>
</template>
<script>
import {wScrollDown} from 'wade-ui'
export default {
name: 'HelloWorld',
data() {
return {loadMsg: '松开刷新', freshFlag: false}
},
methods: {
refresh(state) {
this.loadMsg = '刷新中';
this.freshFlag = state;
setTimeout(() = > {this.loadMsg = '松开刷新';
this.freshFlag = true;
}, 2000);
}
},
components: {wScrollDown}
}
</script>
随便找一个vue项目跑起来就可以看了,这边发现微信发布的时候代码都乱码了,考下来之后格式化一下。
已经部署到npm包:
https://www.npmjs.com/package/wade-ui
下载:
Npm install wade-ui -S
欢迎关注Coding个人笔记 公众号
网友评论