vant2.0 列表上拉下拉加载（普通 or 带搜索条件）
vant2.0 列表上拉下拉加载（普通）
<!--
* @Description: 首页
* @Version: 2.0
* @Autor: lhl
* @Date: 2021-08-21 20:22:30
* @LastEditors: lhl
* @LastEditTime: 2021-08-22 15:20:36
-->
<template>
<div class="home-box">
<div class="top-box">
sss
</div>
<div :style="{ height: divH }" class="scorll-wrap">
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
loading-text="loading...."
:immediate-check="false"
@load="onLoad"
:offset="offset"
>
<template v-for="(item, index) in list">
<div class="list-box" :key="index">
<div class="item">
<div class="left">
<p>{{ item.content }}</p>
<p>{{ item.meetingType }}</p>
</div>
<div class="right">
<p>{{ item.name }}</p>
<p>{{ item.openTime }}</p>
</div>
</div>
</div>
</template>
</van-list>
</van-pull-refresh>
</div>
</div>
</template>
<script>
import { getMeetList } from "@/api";
export default {
data() {
return {
divH: "500px",
list: [],
loading: true,
finished: false, // 是否已加载完成，加载完成后不再触发load事件
refreshing: false,
totol: 0, // 总条数
pageCount: 0, // 总页数
offset: 10, // 滚动条与底部距离小于 offset 时触发load事件
pageData: {
pageNo: 0,
pageSize: 10,
},
};
},
created() {
this.getMeetList();
},
mounted() {
let h =
window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight; //浏览器高度
this.divH = h - 46 - 37.5 - 50 + "px";
},
methods: {
onLoad() {
this.pageData.pageNo++;
this.getMeetList();
},
// 刷新
onRefresh() {
this.list = []; // 清空数据
this.pageData.pageNo = 0; // 重置页码
this.finished = false;
// 将 loading 设置为 true，表示处于加载状态
this.loading = true;
this.getMeetList();
},
getMeetList() {
getMeetList(this.pageData).then((res) => {
const resData = res.data.returnData;
const pageList = resData.data;
this.total = resData.recordCount; // 总条数
this.loading = false;
this.refreshing = false;
if (pageList == null || pageList.length === 0) {
// 加载结束
this.finished = true;
return;
}
// 将新数据与老数据进行合并
this.list = this.list.concat(pageList);
//如果列表数据条数>=总条数，不再触发滚动加载
if (this.list.length >= this.total) {
this.finished = true;
}
});
},
},
};
</script>
<style lang="less">
.scorll-wrap {
overflow: scroll;
}
.home-box {
.top-box {
height: 100px;
line-height: 100px;
background: #ccc;
}
.list-box {
padding: 0 20px;
.item {
background: #f5f5f5;
margin: 30px 0;
display: flex;
justify-content: space-between;
border-radius: 10px;
padding: 20px;
font-size: 36px;
}
}
}
</style>
vant2.0 列表上拉下拉加载（带搜索条件的）
<template>
<div class="list-wrap">
<!-- scroll-list 高度的话两个方案一个是计算动态高度 一个是flex布局 -->
<div class="scroll-list">
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<van-list
v-model="loading"
:finished="finished"
:loading-text="$t('loadingtxt') || 'Loading...'"
:finished-text="finished && noMore ? $t('nodatatxt') || 'No More...' : ''"
:offset="pageSize"
@load="onLoad"
>
<div
v-for="item in list"
:key="item.id"
class="item-box"
>
<div class="left-box">
<p class="left-top-text">
{{ item.id }}
</p>
<p class="left-bottom-text pdt8">
{{ item.cardNumber }}
</p>
</div>
</div>
<!-- 没有数据时候展示 -->
<div
v-if="!loading && !list.length"
class="no-data-box"
>
<img src="~/assets/images/content/nodata.png"/>
<p class="no-data-text">
No Data
</p>
</div>
</van-list>
</van-pull-refresh>
</div>
</div>
</template>
<script>
import API from 'API'
export default {
name: 'scorll',
data () {
return {
// 上拉下拉列表相关
loading: false, // 一开始 loading
finished: false, // 是否已加载完成，加载完成后不再触发load事件
refreshing: false,
// 数据源
list: [],
// 当前页
pageNumber: 1,
// 一页有多少条
pageSize: 20, // 滚动条与底部距离小于 offset 时触发load事件
noMore: true // 是否显示 no more / no data
}
},
methods: {
// 上拉加载
onLoad () {
const data = {
k2ID: 'XXX',
pageNumber: this.pageNumber,
pageSize: this.pageSize
}
API.getList(data)
.then((res) => {
// 刷新状态
if (this.refreshing) {
this.list = []
this.refreshing = false
}
// 成功
const { success, dataObj, message } = res
if (success && dataObj && dataObj.list) {
const { list, total } = dataObj
// 是否显示 no more / no data
if (this.pageNumber === 1 && list.length === 0) {
this.noMore = false
} else {
this.noMore = true
}
// 数据处理
const newList = list.map((item) => {
return {
...item,
cardNumber: `*** **** **** ${item.cardNumber}`
}
})
// 合并数据
this.list = [...this.list, ...newList]
this.pageNumber++ // 分页追加
this.loading = false // 加载状态结束
// 判断是否还有下一页
if (list.length < this.pageSize || total / this.pageSize <= this.pageNumber) {
this.finished = true
}
} else {
// 失败
message && this.$toast(message)
this.loadError()
}
})
.catch((e) => {
this.$toast(e.message)
this.loadError()
})
},
// 列表加载 error
loadError () {
this.loading = false // 加载状态结束
if (this.pageNumber === 1) {
// 不影响后面继续加载，只有第一页加载抱错的时候直接结束
this.finished = true // 加载状态结束
}
// 是否显示no more / no data
if (this.pageNumber === 1 && this.list.length === 0) {
this.noMore = false
} else {
this.noMore = true
}
// 刷新状态, 这里list不做清空处理
this.refreshing = false
},
// 下拉刷新
onRefresh () {
// 清空列表数据
this.pageNumber = 1
this.finished = false
this.loading = true
this.onLoad()
},
// 查询回调
handleSearch () {
this.list = []
this.pageNumber = 1
this.onRefresh()
}
}
}
</script>
<style lang="less" scoped></style>
