vue实现下拉刷新，下拉加载

html代码

<div
class="content"
@touchstart="touchstart"
@touchmove="touchmove"
@touchend="touchend"
ref="cusMcontent"
></div>

js代码

defaultOffset: any = 50; // 默认位移
top: any = 0; // 滑动距离
scrollIsToTop: any = 0; // 滚动条位置
startY: any = 0; // 开始位置
isDropDown: any = false; // 是否可刷新

touchstart(e) {
    // 记录初始位置
    this.startY = e.targetTouches[0].pageY;
}
touchmove(e) {
    // 是否触顶
    this.scrollIsToTop = (this.$refs as any).cusMcontent.scrollTop;
    // 触顶并手势是下拉
    if (e.targetTouches[0].pageY > this.startY && this.scrollIsToTop === 0) {
        // 下拉
        this.isDropDown = true;
        this.top = e.targetTouches[0].pageY - this.startY;
    } else {
        this.isDropDown = false;
    }
}
touchend(e) {
    if (this.isDropDown) {
        if (this.top >= this.defaultOffset) {
            // 下拉位移超过设置值，刷新
            this.init();
        } else {
            // 下拉位移小于设置值，初始化值
            this.reset();
        }
    }

}
reset() {
    this.isDropDown = false;
    this.top = 0;
}