<template>
<div class="director-mail">
<mt-header fixed title="标题">
<router-link to="/" slot="right">
<mt-button>右侧文字</mt-button>
</router-link>
</mt-header>
<!--主要内容-->
<div class="page-loadmore">
<div class="page-loadmore-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
<mt-loadmore :bottom-method="loadBottom" @bottom-status-change="handleBottomChange"
:bottom-all-loaded="allLoaded" ref="loadmore">
<ul class="page-loadmore-list">
<li v-for="item in list" class="page-loadmore-listitem">
{{ item }}
</li>
</ul>
<div slot="bottom" class="mint-loadmore-bottom">
<span v-show="bottomStatus !== 'loading'" :class="{ 'is-rotate': bottomStatus === 'drop' }">↑</span>
<span v-show="bottomStatus === 'loading'">
<mt-spinner type="snake"></mt-spinner>
</span>
</div>
</mt-loadmore>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [],
allLoaded: false,
bottomStatus: '',
wrapperHeight: 0
};
},
methods: {
handleBottomChange(status) {
this.bottomStatus = status;
},
loadBottom() {
setTimeout(() => {
let lastValue = this.list[this.list.length - 1];
if (lastValue < 40) {
for (let i = 1; i <= 10; i++) {
this.list.push(lastValue + i);
}
} else {
this.allLoaded = true;
}
this.$refs.loadmore.onBottomLoaded();
}, 1500);
}
},
created() {
for (let i = 1; i <= 10; i++) {
this.list.push(i);
}
},
mounted() {
this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
},
};
</script>
<style lang='less'>
.director-mail {
.page-loadmore {
margin-top: 40px; /*mt-loadmore控件的父级必须加此属性否则下拉的loadBottom事件不会生效 */
overflow: scroll;
.page-loadmore-list { /*列表ul元素必须加一个最小高度(li的高度*li初始渲染数量)否则ajax获取数据时,会自动多次触发loadBottom事件,导致数据加载完毕*/
min-height:1000px;
.page-loadmore-listitem {
height: 100px;
line-height: 100px;
border-bottom: solid 1px #eee;
text-align: center;
}
}
.mint-loadmore-bottom {
span {
display: inline-block;
transition: .2s linear;
vertical-align: middle;
}
.mint-spinner {
display: inline-block;
vertical-align: middle;
}
}
}
}
</style>