topDropped: false, // 记录当前drop状态,用给组件dom添加is-dropped class(添加回到原点的动画)
bottomText: '', // 上拉加载更多 显示的文本
bottomDropped: false, // 同topDropped
bottomReached: false, // 当前滚动是否滚动到了底部
direction: '', // touch-move过程中, 当前滑动的方向
startY: 0, // touch-start 起始的y的坐标值
startScrollTop: 0, // touch-start 起始的滚动dom的 scrollTop
currentY: 0, // touch-move 过程中的 y的坐标
topStatus: '', // 下拉刷新的状态: pull(下拉) drop(释放) loading(正在加载数据)
bottomStatus: '' // 上拉加载更多的状态: 状态同上
};
}
上面的关于每个data数据的具体作用通过注释做了详细说明。
watch解析
watch: {
topStatus(val) {
this.$emit('top-status-change', val);
switch (val) {
case 'pull':
this.topText = this.topPullText;
break;
case 'drop':
this.topText = this.topDropText;
break;
case 'loading':
this.topText = this.topLoadingText;
break;
}
}, bottomStatus(val) {
this.$emit('bottom-status-change', val);
switch (val) {
case 'pull':
this.bottomText = this.bottomPullText;
break;
case 'drop':
this.bottomText = this.bottomDropText;
break;
case 'loading':
this.bottomText = this.bottomLoadingText;
break;
}
}
}
上面是组件通过watch监听的两个变量，后面我们能看到他们的改变是在touchmove事件中进行处理改变的。它的作用是通过它的变化来改变top slot和bottom slot的文本内容；
同时发出status-change事件给外部使用，因为可能外部自定义top slot 和bottom slot的内容，通过此事件来通知外部当前状态以便外部进行处理。
核心函数的解析
这里就不将所有的method列出，下面就根据处理的所以来解析对应的method函数。
首先，入口是在组件mounted生命周期的钩子回调中执行init函数
mounted() {
this.init();// 当前 vue component挂载完成之后, 执行init()函数
}init函数：
init() {
this.topStatus = 'pull';
this.bottomStatus = 'pull';
this.topText = this.topPullText;
this.scrollEventTarget = this.getScrollEventTarget(this.$el); // 获取滚动的dom节点
if (typeof this.bottomMethod === 'function') {
this.fillContainer(); // 判断当前滚动内容是否填满,没有执行外部传入的loadmore回调函数加载数据
this.bindTouchEvents(); // 为当前组件dom注册touch事件
}
if (typeof this.topMethod === 'function') {
