handleTopChange: function (status) {
this.topStatus = status;
},
itemClick: function (data) {
console.log('item click, msg : ' + data);
}
}
});
</script>
实现原理解析
布局原理
loadmore组件内部由三个slot组成，分别为name=top,name=bottom,default；
top用于展示下拉刷新不同状态展示的内容，初始设置margin-top为-top的高度来将自己隐藏
bottom同top，用于展示上拉加载更多不同状态展示的内容
default填充滚动详细内容
实现原理
主要是通过js的touch事件的监听来实现
在touchmove事件，如果是向下滑动并且滚动的dom的scrollTop为0，那么整个组件向下偏移(滑动的距离/比值)展示出top solt的内容
在touchmove时间，如果是向上滑动并且滑动到了底部，再继续滑动整个组件向上偏移(滑动的距离/比值)展示出bottom solt的内容
源码解析
组件的template html
<div class="mint-loadmore">
<div class="mint-loadmore-content" :class="{ 'is-dropped': topDropped || bottomDropped}" :style="{ 'transform': 'translate3d(0, ' + translate + 'px, 0)' }">
<slot name="top">
<div class="mint-loadmore-top" v-if="topMethod">
<spinner v-if="topStatus === 'loading'" class="mint-loadmore-spinner" :size="20" type="fading-circle"></spinner>
<span class="mint-loadmore-text">{{ topText }}</span>
</div>
</slot>
<slot></slot>
<slot name="bottom">
<div class="mint-loadmore-bottom" v-if="bottomMethod">
<spinner v-if="bottomStatus === 'loading'" class="mint-loadmore-spinner" :size="20" type="fading-circle"></spinner>
<span class="mint-loadmore-text">{{ bottomText }}</span>
</div>
</slot>
</div>
</div>关于 上面的spinner标签，是一个组件，这里不做详细介绍。top solt和bottom slot中的内容是展示的内容，可以通过外部自定义的方式传入。
其实它的实现有一个很严重的弊端，就是写死了top solt和bottom slot的高度为50px，而且js中的处理也是使用50px进行的逻辑处理。所以并满足我们开发中自定义top slot 和bottom slot的需求。
js核心解析
props解析：关于props的解析，可以参考mint-ui的官方文档
data解析
data() {
return {
translate: 0, // 此变量决定当前组件上下移动,
scrollEventTarget: null, // 滚动的dom节点
containerFilled: false, // 当前滚动的内容是否填充完整,不完成会调用 loadmore的回调函数
topText: '', // 下拉刷新,显示的文本
