vue 上拉加载+下拉刷新
<template>
<div
class="message-detail"
:style="dataList.length != 0 ? 'background: #f7f8fa;' : ''"
>
<!-- 列表 -->
<div class="content-wrap" id="content-wrap">
<message-detail-card
:dataList="dataList"
@getList="getList"
></message-detail-card>
<div class="footer-text" v-if="dataList.length != 0">
<van-loading v-if="tips" type="spinner" size="16px"
>加载中...</van-loading
>
<div v-else class="footer-text">没有更多了</div>
</div>
</div>
</div>
</template>
<script>
//这个端可以判断角色
import { mapGetters } from "vuex";
import { getNoticeList} from "@/api/mine";
// import assetRevenueCard from "./asset-revenue-card.vue";
import messageDetailCard from "./message-detail-card.vue";
export default {
name: "message-detail",
components: {
messageDetailCard,
// assetRevenueCard
},
computed: {
...mapGetters(["userInfo"]),
},
data() {
return {
// 列表数据
dataList: [],
tips: false,
title:"",
// 分页
page: {
size: 15,
current: 1,
total: 0,
},
};
},
created() {
this.title = localStorage.getItem("title")
this.getList();
},
methods: {
// 获取列表
getList() {
this.tips = true;
getNoticeList({
noticeTitle:this.title,
current: this.page.current,
size: this.page.size,
}).then((res) => {
const data = res.data.data;
this.page.total = data.total;
//分页
if (this.page.current == 1) {
this.dataList = JSON.parse(JSON.stringify(data.records));
} else if (this.dataList.length <= this.page.total) {
this.dataList = JSON.parse(
JSON.stringify(this.dataList.concat(data.records))
);
}
this.tips = false;
});
},
//滚动事件-触底加载
handleScroll() {
//1.获取滚动区域元素
let contentWrap = document.getElementById("content-wrap");
if (contentWrap) {
//2.获取元素高度
let height = contentWrap.offsetHeight;
//3.获取滚动区域到头部的距离
let top = contentWrap.scrollTop || document.documentElement.scrollTop;
//4.获取滚动条高度
let scrollHeight = contentWrap.scrollHeight;
//5.滚动条到底部的条件 (滚动区域到头部的距离 + 屏幕高度 = 可滚动的总高度)
if (top + height + 1 >= scrollHeight) {
this.loadMore();
}
}
},
// 列表上拉加载
loadMore() {
if (this.tips) return; //节流阀判断
if (Math.ceil(this.page.total / this.page.size) > this.page.current) {
this.page.current++;
this.getList();
}
},
},
mounted() {
// 监听滚动事件，然后用handleScroll这个方法进行相应的处理
window.addEventListener("scroll", this.handleScroll, true);
},
// 离开这个页面销毁滚动条事件，不然会给每一个页面都触发
beforeDestroy() {
window.removeEventListener("scroll", this.handleScroll, true);
},
};
</script>
<style scoped lang="scss">
.message-detail {
min-height: 100vh;
box-sizing: border-box;
overflow: hidden;
.content-wrap {
overflow: auto;
}
:deep(.van-empty) {
padding-top: 40%;
}
}
</style>
如果您想快速高效解决问题，这里可以有偿帮您直接解决bug，我们团队的微信号是18062748486；如加微信，请备注“Bug 解决“；
