mint-ui Loadmore分页查询加载的使用说明+实例
引入啥的就不说了，直接上实例代码吧，挺简单的看一下就会了，没有提供样式需要自己添加，没有提供数据，需要的直接将url改成自己的接口就可以了。
实例代码：
<
template
>
<
div
>
<
section
class=
"listMenu"
>
<
section
v-show='
nodata'
class=
"reportList"
ref=
"reportList"
>
<
v-loadmore
:bottom-method="
loadBottom"
:top-method="
loadTop"
:bottom-all-loaded="
allLoaded"
:bottomPullText='
bottomPullTextVal'
:bottomDropText='
bottomDropTextVal'
:bottomLoadingText='
bottomLoadingTextVal'
:topPullText='
topPullTextVal'
:topDropText='
topDropTextVal'
:topLoadingText='
topLoadingTextVal'
:autoFill="
false"
@bottom-status-change="
handleBottomChange"
@top-status-change="
handleTopChange"
ref=
"loadmore"
>
<
ul
class=
'ulcont'
ref=
"reportList"
>
<
li
v-for="(
item,
index)
in
reportList"
v-cloak
:key="
index"
>
li
>
ul
>
v-loadmore
>
section
>
section
>
div
>
template
>
<
script
>
import {
Loadmore }
from
'mint-ui';
export
default {
name:
'',
data () {
return {
listDetailHos: [],
searchCondition: {
pageVal:
"0",
pageSize:
"10"
},
allLoaded:
false,
//是否可以上拉属性，false可以上拉，true为禁止上拉
status:
"",
bottomPullTextVal:
'上划加载更多数据',
bottomDropTextVal:
'释放更新',
bottomLoadingTextVal:
'加载中...',
topPullTextVal:
'下拉加载更多数据',
topDropTextVal:
'释放更新',
topLoadingTextVal:
'加载中...',
topStatus:
'',
bottomStatus:
'',
}
},
components: {
'v-loadmore'
:
Loadmore,
},
mounted() {
this.
$nextTick(()
=> {
let
h =
window.
innerHeight ||
document.
documentElement.
clientHeight ||
document.
body.
clientHeight;
this.
$refs.
reportList.
style.
height =
h +
'px';
})
},
methods: {
//获取报告列表
GetList() {
//报告列表
if(
this.
searchCondition.
pageVal ==
0) {
//加载报告列表
this.
$http.
post(
url, {
"Pageindex"
:
this.
searchCondition.
pageVal,
"PageSize"
:
this.
searchCondition.
pageSize
},{
emulateJSON:
true,
headers: {}}).
then(
data
=> {
if(
data.
body.
Data.
length ==
0) {
this.
nodata =
false;
}
else
if (
data.
body.
Data.
length ==
this.
searchCondition.
pageSize) {
this.
reportList =
data.
body.
Data;
}
else {
this.
reportList =
data.
body.
Data;
this.
allLoaded =
true;
}
},
err
=> {
console.
log(
'error' +
err);
});
}
else {
//加载报告列表
this.
$http.
post(
url, {
"Pageindex"
:
this.
searchCondition.
pageVal,
"PageSize"
:
this.
searchCondition.
pageSize
},{
emulateJSON:
true,
headers:{}}).
then(
data
=> {
if(
data.
body.
Data.
length ==
this.
searchCondition.
pageSize) {
for(
var
i =
0;
i <
this.
searchCondition.
pageSize;
i++) {
this.
reportList.
push(
data.
body.
Data[
i]);
}
}
else {
for(
var
i =
0;
i <
data.
body.
Data.
length;
i++) {
this.
reportList.
push(
data.
body.
Data[
i]);
}
this.
allLoaded =
true;
};
},
err
=> {
console.
log(
'error' +
err);
});
}
},
//上拉加载
loadBottom () {
this.
searchCondition.
pageVal++;
this.
$refs.
loadmore.
onBottomLoaded();
this.
GetList();
},
//下拉刷新
loadTop () {
this.
allLoaded =
false;
this.
searchCondition.
pageVal =
0;
this.
$http.
post(
url, {
"Pageindex"
:
this.
searchCondition.
pageVal,
"PageSize"
:
this.
searchCondition.
pageSize
},{
emulateJSON:
true,
headers:{}}).
then(
data
=> {
this.
reportList =
data.
body.
Data;
this.
$refs.
loadmore.
onTopLoaded();
},
err
=> {
console.
log(
'error' +
err);
});
},
handleTopChange(
status) {
this.
topStatus =
status;
},
handleBottomChange(
status) {
this.
bottomStatus =
status;
},
}
}
script
>
<
style
scoped
lang=
'scss'
>
style
>