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 
   === 
   '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: [],
  
  
false,
  
  
''
  

    };
  
  

    },
  
  
created: 
   function
  
for (
   let i 
   =
   0; i
   < 
   20; i
   ++){
  
  
this.list.
   push(
   'demo' 
   +
  

    }
  
  

    },
  
  

    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' 
   +
  

    }
  
  
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' 
   +
  

    }
  
  
if(
   this.list.length 
   > 
   40){
  
  
this.allLoaded 
   = 
   true;
   // 若数据已全部获取完毕
  

    }
  
  
this.$refs.loadmore.
   onBottomLoaded();
  
  
2000);
  
  

    },
  
  
handleTopChange: 
   function (
   status) {
  
  
this.topStatus 
   =
  

    }
  
  

    }
  
  

    };
  
  
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: 
   120
   px;
  
  
font-size: 
   60
   px;
  
  
text-align: 
   center;
  
  

   }
  
  
style>