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') { this.bindTouchEvents(); } }, fillContainer() { if (this.autoFill) { this.$nextTick(() => { if (this.scrollEventTarget === window) { this.containerFilled = this.$el.getBoundingClientRect().bottom >= document.documentElement.getBoundingClientRect().bottom; } else { this.containerFilled = this.$el.getBoundingClientRect().bottom >= this.scrollEventTarget.getBoundingClientRect().bottom; } if (!this.containerFilled) { // 如果没有填满内容, 执行loadmore的操作 this.bottomStatus = 'loading'; this.bottomMethod();// 调用外部的loadmore函数,加载更多数据 } }); } }
init函数主要是初始化状态和事件的一些操作，下面着重分析touch事件的回调函数的处理。
首先touchstart事件回调处理函数
handleTouchStart(event) { this.startY = event.touches[0].clientY; // 手指按下的位置, 用于下面move事件计算手指移动的距离 this.startScrollTop = this.getScrollTop(this.scrollEventTarget); // 起始scroll dom的 scrollTop(滚动的距离) //下面重置状态变量 this.bottomReached = false; if (this.topStatus !== 'loading') { this.topStatus = 'pull'; this.topDropped = false; } if (this.bottomStatus !== 'loading') { this.bottomStatus = 'pull'; this.bottomDropped = false; } }
主要是记录初始位置和重置状态变量。
下面继续touchmove的回调处理函数
handleTouchMove(event) { //确保当前touch节点的y的位置,在当前loadmore组件的内部 if (this.startY < this.$el.getBoundingClientRect().top && this.startY > this.$el.getBoundingClientRect().bottom) { return; } this.currentY = event.touches[0].clientY; let distance = (this.currentY - this.startY) / this.distanceIndex; this.direction = distance > 0 ? 'down' : 'up'; // 下拉刷新,条件(1.外部传入了刷新的回调函数 2.滑动方向是向下的 3.当前滚动节点的scrollTop为0 4.当前topStatus不是loading) if (typeof this.topMethod === 'function' && this.direction === 'down' && this.getScrollTop(this.scrollEventTarget) === 0 && this.topStatus !== 'loading') { event.preventDefault(); event.stopPropagation(); //计算translate(将要平移的距离), 如果当前移动的距离大于设置的最大距离,那么此次这次移动就不起作用了 if (this.maxDistance > 0) { this.translate = distance <= this.maxDistance ? distance - this.startScrollTop : this.translate; } else { this.translate = distance - this.startScrollTop; } if (this.translate < 0) { this.translate = 0; } this.topStatus = this.translate >= this.topDistance ? 'drop' : 'pull';// drop: 到达指定的阈值,可以执行刷新操作了 } // 上拉操作, 判断当前scroll dom是否滚动到了底部 if (this.direction === 'up') { this.bottomReached = this.bottomReached || this.checkBottomReached(); } if (typeof this.bottomMethod === 'function' && this.direction === 'up' && this.bottomReached && this.bottomStatus !== 'loading' && !this.bottomAllLoaded) { event.preventDefault(); event.stopPropagation(); // 判断的逻辑思路同上 if (this.maxDistance > 0) { this.translate = Math.abs(distance) <= this.maxDistance ? this.getScrollTop(this.scrollEventTarget) - this.startScrollTop + distance : this.translate; } else { this.translate = this.getScrollTop(this.scrollEventTarget) - this.startScrollTop + distance; } if (this.translate > 0) { this.translate = 0; } this.bottomStatus = -this.translate >= this.bottomDistance ? 'drop' : 'pull'; } this.$emit('translate-change', this.translate); }
上面的代码逻辑挺简单，注释也就相对不多。
重点谈一下checkBottomReached()函数，用来判断当前scroll dom是否滚动到了底部。