<template>
<div style="min-height:200px">
<mt-loadmore :top-method="loadTop" @top-status-change="handleTopChange" @bottom-status-change="handleBottomChange" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
<ul>
<li v-for="(item,index) in list">[{{index}}]{{ item.text }}</li>
</ul>
<div slot="top" class="mint-loadmore-top">
<span v-show="topStatus !== ‘loading‘" :class="{ ‘rotate‘: topStatus === ‘drop‘ }">↓</span>
<span v-show="topStatus === ‘loading‘">上拉加载中...</span>
</div>
<div slot="bottom" class="mint-loadmore-bottom">
<span v-show="bottomStatus !== ‘loading‘" :class="{ ‘rotate‘: topStatus === ‘drop‘ }">↑</span>
<span v-show="bottomStatus === ‘loading‘">下拉加载中...</span>
</div>
</mt-loadmore>
</div>
</template>
<script>
import axios from ‘axios‘;
import * as _global from ‘../../plugs/global‘;
import TrendFun from ‘../../plugs/function‘;
import BUS from ‘../../plugs/bus.js‘;
import { Toast,Loadmore } from ‘mint-ui‘;
let trendFun=new TrendFun(); //公共函数库
let __REQUEST=trendFun.__REQUEST();
let __URILIST=_global.default;
export default {
name: ‘app‘,
data(){
return{
allLoaded:false,
page:0,
list: [ ]
}
},
created(){
//this.getList();
},
methods:{
handleTopChange:function(status) {
this.topStatus = status;
console.log("this.topStatus = status; "+ status);
},
handleBottomChange:function(status) {
this.bottomStatus = status;
console.log("this.bottomStatus = status; "+ status);
},
getList:function(page){
__REQUEST.bizParams={
"bankCardId":"" ,// 银行卡ID ----非必填,只有在专门查一个银行卡时传
"cardBizCode":"WITHOLDING",// 卡业务编码 默认卡(DEFAULT), 自动代扣卡(WITHOLDING) ----- 非必填,不填查所有的
"type":"" // 卡类型 0:查询所有卡 1:只查储蓄卡 2:只查信用卡 ----- 非必填
}
let request=__REQUEST;
axios.get(__URILIST[2], {
params:request
})
.then(response=>{
let res=response.data; //axios返回的数据是用response.data包括的,和jquery不一样
if(res.data){
let tmparry=[];
//console.log(res.data.debitList);
res.data.msgList.map((e,i)=>{
if(e.msgType==1 && i<=3){
tmparry.push(e);
}
});
this.list = this.list.concat(tmparry);
//this.list.push(tmparry);
console.log(tmparry);
}
})
.catch(function (error) {
console.log(error);
});
},
loadTop:function(){
console.log(this.page);
//默认是第三页,下拉刷新的时候获取第一页
//this.page=1;
this.getList(this.page);
this.$refs.loadmore.onTopLoaded(); //手动调用,组件定位
this.$refs.loadmore.onBottomLoaded();
console.log("上拉执行");
},
loadMore:function(){
console.log("loadMore");
},
loadBottom:function() {
console.log("下拉在执行");
this.page=this.page+1;
console.log("this.page:"+this.page);
this.getList(this.page);
if(this.page==20){
this.allLoaded=true; //当所有数据 全部读取完成的时候 停止下拉读取数据
//this.$refs.loadmore.onBottomLoaded();
}
}
},
components: {
}
}
</script>
原文:http://www.cnblogs.com/yuri2016/p/6785858.html