详解vue mint-ui源码解析之loadmore组件
|
本文介绍了vue mint-ui源码解析之loadmore组件，分享给大家，具体如下： 接入官方接入文档mint-ui loadmore文档 接入使用Example html <div slot="top" class="mint-loadmore-top">
<span v-show="topStatus === 'pull'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
<span v-show="topStatus === 'loading'">Loading...</span>
<span v-show="topStatus === 'drop'">释放更新</span>
</div>
<ul class="scroll-wrapper">
<li v-for="item in list" @click="itemClick(item)">{{ item }}</li>
</ul>
css
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
app{height: 100%; } js 实现原理解析布局原理
实现原理
源码解析组件的template html 关于 上面的spinner标签，是一个组件，这里不做详细介绍。top solt和bottom slot中的内容是展示的内容，可以通过外部自定义的方式传入。 其实它的实现有一个很严重的弊端，就是写死了top solt和bottom slot的高度为50px，而且js中的处理也是使用50px进行的逻辑处理。所以并满足我们开发中自定义top slot 和bottom slot的需求。 js核心解析
上面的关于每个data数据的具体作用通过注释做了详细说明。 watch解析 上面是组件通过watch监听的两个变量，后面我们能看到他们的改变是在touchmove事件中进行处理改变的。它的作用是通过它的变化来改变top slot和bottom slot的文本内容； 同时发出status-change事件给外部使用，因为可能外部自定义top slot 和bottom slot的内容，通过此事件来通知外部当前状态以便外部进行处理。 核心函数的解析这里就不将所有的method列出，下面就根据处理的所以来解析对应的method函数。 首先，入口是在组件mounted生命周期的钩子回调中执行init函数 init函数： {
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事件回调处理函数 主要是记录初始位置和重置状态变量。 下面继续touchmove的回调处理函数 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是否滚动到了底部 上面的代码逻辑挺简单，注释也就相对不多。 重点谈一下checkBottomReached()函数，用来判断当前scroll dom是否滚动到了底部。 = document.body.scrollHeight;
} else {
return this.$el.getBoundingClientRect().bottom <= this.scrollEventTarget.getBoundingClientRect().bottom + 1;
}
}
经过我的测试，上面的代码是有问题: 当scrollEventTarget是window的条件下，上面的判断是不对的。因为document.body.scrollTop总是比正常值小1，所以用于无法满足到达底部的条件； 当scrollEventTarget不是window的条件下，上面的判断条件也不需要在this.scrollEventTarget.getBoundingClientRect().bottom后面加1，但是加1也不会有太大视觉上的影响。 最后来看下moveend事件回调的处理函数 0) {
this.topDropped = true; // 为当前组件添加 is-dropped class(也就是添加动画处理)
if (this.topStatus === 'drop') { // 到达了loading的状态
this.translate = '50'; // top slot的高度
this.topStatus = 'loading';
this.topMethod(); // 执行回调函数
} else { // 没有到达,回调原点
this.translate = '0';
this.topStatus = 'pull';
}
}
// 处理逻辑同上
if (this.direction === 'up' && this.bottomReached && this.translate < 0) {
this.bottomDropped = true;
this.bottomReached = false;
if (this.bottomStatus === 'drop') {
this.translate = '-50';
this.bottomStatus = 'loading';
this.bottomMethod();
} else {
this.translate = '0';
this.bottomStatus = 'pull';
}
}
this.$emit('translate-change',this.translate);
this.direction = '';
}
}
总结
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |