<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>
##后来如下解决，在外层放一个 div，此div是整个屏幕的高
<div class="page-loadmore-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
主要就是这个：
<template>
<div class="page-loadmore-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
<mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :top-method="loadTop" @top-status-change="handleTopChange" ref="loadmore">
<ul>
<li v-for="(item,index) in list">[{{index}}]{{ item.name }}</li>
</ul>
<ul>
<li v-for="(item,index) in list">[{{index}}]{{ item.name }}</li>
</ul>
<div slot="top" class="mint-loadmore-top">
<span v-show="topStatus !== 'loading'" :class="{ 'is-rotate': topStatus === 'drop' }">↓</span>
<span v-show="topStatus === 'loading'"><mt-spinner type="snake"></mt-spinner></span>
</div>
<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>
</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,Indicator,Loadmore } from 'mint-ui';
// let trendFun=new TrendFun(); //公共函数库
// let __REQUEST=trendFun.__REQUEST();
// let __URILIST=_global.default;
let __REQUEST={};
export default {
name: 'app',
data(){
return{
allLoaded:false,
page:0,
list: [
{
"name": ".gitignore1"
},
{
"name": ".gitignore"
},
{
"name": ".gitignore"
},
{
"name": ".gitignore"
},
{
"name": ".gitignore"
},
{
"name": ".gitignore"
},
{
"name": ".gitignore"
},
{
"name": ".gitignore"
},
{
"name": ".gitignore"
},
{
"name": ".gitignore"
},
{
"name": ".gitignore"
},
{
"name": ".gitignore"
},
{
"name": ".gitignore"
},
{
"name": ".gitignore"
},
{
"name": ".gitignore"
},
{
"name": ".gitignore"
},
{
"name": ".gitignore"
},
{
"name": ".gitignore"
},
{
"name": ".gitignore"
},
{
"name": ".gitignore100"
}
],
topStatus:'',
bottomStatus:'' ,
wrapperHeight: 0
}
},
mounted() {
this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
},
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('https://api.github.com/repos/typecho-fans/plugins/contents/', {
params:request
})
.then(response=>{
let res=response.data; //axios返回的数据是用response.data包括的，和jquery不一样
console.log();
if(res){
let tmparry=[];
//console.log(res.data.debitList);
res.map((e,i)=>{
if(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(); //手动调用，组件定位
console.log("上拉执行");
},
loadMore:function(){
console.log("loadMore");
},
loadBottom:function() {
console.log("下拉在执行");
this.page=this.page+1;
this.$refs.loadmore.onBottomLoaded();
console.log("this.page:"+this.page);
this.getList(this.page);
if(this.page==5){
this.allLoaded=true; //当所有数据 全部读取完成的时候 停止下拉读取数据
}
}
},
components: {
}
}
</script>
<style>
.page-loadmore .mint-spinner {
display: inline-block;
vertical-align: middle
}
.page-loadmore-desc {
text-align: center;
color: #666;
padding-bottom: 5px
}
.page-loadmore-desc:last-of-type,.page-loadmore-listitem {
border-bottom: 1px solid #eee
}
.page-loadmore-listitem {
height: 50px;
line-height: 50px;
text-align: center
}
.page-loadmore-listitem:first-child {
border-top: 1px solid #eee
}
.page-loadmore-wrapper {
margin-top: -1px;
overflow: scroll
}
.loading-background {
100%;
height: 50px;
line-height: 50px;
text-align: center
}
.loading-background,.mint-loadmore-top span {
-webkit-transition: .2s linear;
transition: .2s linear
}
.mint-loadmore-top span {
display: inline-block;
vertical-align: middle
}
.mint-loadmore-top span.is-rotate {
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
.page-loadmore .mint-spinner {
display: inline-block;
vertical-align: middle
}
.page-loadmore-desc {
text-align: center;
color: #666;
padding-bottom: 5px
}
.page-loadmore-desc:last-of-type,.page-loadmore-listitem {
border-bottom: 1px solid #eee
}
.page-loadmore-listitem {
height: 50px;
line-height: 50px;
text-align: center
}
.page-loadmore-listitem:first-child {
border-top: 1px solid #eee
}
.page-loadmore-wrapper {
overflow: scroll
}
.mint-loadmore-bottom span {
display: inline-block;
-webkit-transition: .2s linear;
transition: .2s linear;
vertical-align: middle
}
.mint-loadmore-bottom span.is-rotate {
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
</style>