mint ui : loadmore上拉刷新下拉加载

<template> <div id="app"> <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :max-distance="150" @top-status-change="handleTopChange" ref="loadmore">
<div slot="top" class="mint-loadmore-top"> <span v-show="topStatus
de2a
=== '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,index) in list" :key="index">{{ item }}</li> </ul>
<div v-if="allLoaded"> 没有更多了 </div>
</mt-loadmore></div></template><script>import {Loadmore} from 'mint-ui';
export default { data() { return { list: [], allLoaded: false, topStatus: '' }; }, created: function () { for (let i =0; i< 20; i++){ this.list.push('demo' + i); }
}, methods: { loadTop: function () { // 刷新数据的操作 this.allLoaded = false; setTimeout(()=>{ this.list.splice(0, this.list.length); let len=20; for (let i = 0; i< len; i++){ this.list.push('demo' + i); } this.$refs.loadmore.onTopLoaded(); }, 2000); }, loadBottom: function () { // 加载更多数据的操作 //load data console.log(this.list.length) if(this.allLoaded){ return; } setTimeout(()=>{ let len = 10; for (let i =0; i< len; i++){ this.list.push('dddd' + i); }
if(this.list.length > 40){ this.allLoaded = true;// 若数据已全部获取完毕 } this.$refs.loadmore.onBottomLoaded(); }, 2000);
}, handleTopChange: function (status) { this.topStatus = status; } } };</script><style>*{ margin: 0; padding: 0;}html, body{ height: 100%;}
#app{
height: 100%; overflow: scroll;}.scroll-wrapper{ margin: 0; padding: 0; list-style: none;
}.scroll-wrapper li{ line-height: 120px; font-size: 60px; text-align: center;}</style>