import { PullRefresh } from 'vant';
Vue.use(PullRefresh);
data 部分:
pageNum: 1,
pageSize: 6,
all_rows:[],
all_total:"",
loading: false,
finished: false,
refreshing: false, /*是否处于加载中,false 就是去掉loading 圈圈*/
html 的部分：
<div v-show="all_rows.length > 0">
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<div class="menuItemDWrap" v-for='(item,index) of all_rows' :key="index" >
<div class="menuItemInner" > <!--<van-icon name="arrow" color="#00A0EA" />-->
<div @click="toPdfReading(item)" class="menuItemD">
<img :src="file">
<div class="itemDFont">
<div>{{item.pdfName}}</div>
<div class="beBlue">在线阅读 > </div>
</div>
</div>
</div>
<div class="separateLine paddingSet"></div>
</div>
</van-list>
</van-pull-refresh>
</div>
created () {
this.searchParam = this.$route.params.searchParam;
//调用接口后把这些去掉
this.getOrdersInit(this.searchParam) /*初始化参数*/
},
methods: 部分
/*上拉加载*/
onLoad () {
console.log("上拉...onload")
setTimeout(() => {
api
.findByPdfName({
pdfName: this.searchParam,
pageSize: this.pageSize,
pageNum: this.pageNum,
})
.then((res) => {
if (res.code == 200) {
this.all_total = res.data.total;
if (this.pageNum == 1) {
this.all_rows = [];
}
this.all_rows = this.all_rows.concat(res.data.rows)
console.log(this.pageNum, this.all_rows, "onload数据")
if (res.data.rows.length < this.pageSize) {
this.loading = false
this.finished = true
console.log("全部加载结束")
} else {
this.loading = false /*loading 光标加载结束2222*/
this.finished = false
}
this.pageNum++;
} else {
this.$message({
message: res.message,
icon: 'error',
timeout: 1500,
});
}
});
}, 1000);
},
/*下拉刷新*/
onRefresh () {
this.finished = false
this.loading = true;
setTimeout(() => {
this.getOrders();
//请求数据有结果后 ；
}, 1000);
},
getOrders () {
console.log("下拉刷新 ... ")
this.pageNum = 1;
api
.findByPdfName({
pdfName: this.searchParam,
pageSize: this.pageSize,
pageNum: this.pageNum,
})
.then((res) => {
if (res.code == 200) {
this.all_total = res.data.total;
this.all_rows = res.data.rows;
/* console.log(this.all_rows.length,"结果的长度")*/
} else {
this.$message({
message: res.message,
icon: 'error',
timeout: 1500,
});
}
this.refreshing = false; // 刷新加载结束
this.loading = false //在每次请求完毕后，需要手动将loading设置为false，表示加载结束
});
},
getOrdersInit () {
this.pageNum = 1;
api
.findByPdfName({
pdfName: this.searchParam,
pageSize: this.pageSize,
pageNum: this.pageNum,
})
.then((res) => {
if (res.code == 200) {
this.all_total = res.data.total;
this.all_rows = res.data.rows;
} else {
this.$message({
message: res.message,
icon: 'error',
timeout: 1500,
});
}
});
},