admin管理员组文章数量:1596328
效果如图所示:
如图(回到当前页):
由于图片数量较大,一次全把数据请求出来加载很慢,所以就需要加滚动条请求数据。
v-infinite-scroll=“infiniteScroll” :表示会触发回调函数infiniteScroll
infinite-scroll-distance=“10”:表示距离底部10px时会触发该事件
:infinite-scroll-disabled="routeLoad || noMore":表示由变量routeLoad 决定是否执行routeLoad 等于false则执行 infiniteScroll,控制滚动禁用,true则不执行,
infinite-scroll-immediate-check: 默认值为true,该指令表示,在绑定后立即检查infiniteScroll的值和是否滚动到底。假如你的初始内容高度不够,不足以填满可滚动的容器的话,你应设为true,这样会立即执行一次routeLoad ,会帮你填充一些初始内容。
infinite-scroll-listen-for-event: 当事件在Vue实例中发出时,无限滚动将再次检查。
infinite-scroll-throttle-delay: 检查routeLoad 的值的时间间隔,默认值是200,因为vue-infinite-scroll的基础原理是,vue-infinite-scroll会循环检查routeLoad 的值,以及是否滚动到底,只有当:routeLoad 为false且滚动到底,回调函数才会执
主要代码如下:
<template>
<div class="infinite-list-wrapper">
<div v-if="imageData.length > 0" class="photo_box" ref="photo_box" v-loading="loading"
v-infinite-scroll="infiniteScroll"
//在要实现滚动加载的列表上上添加v-infinite-scroll,并赋值相应的加载方法,可实现滚动到底部时
//自动执行加载方法。
:infinite-scroll-disabled="routeLoad || noMore" // 是否禁用(数据到最后时,禁止滚动加载)
:infinite-scroll-distance="10" // 触发加载的距离阈值,单位为px
element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
<el-card :body-style="{ border: '0px', padding: '0px' }" shadow="hover"
v-for="(item, index) in imageData" :key="index">
...
</el-card>
<p v-if="scrollUserLoading" style="text-align: center;font-size:14px;padding:10px 0">
数据加载中...</p>
<p v-if="noMore" style="text-align: center;font-size:14px;padding:10px 0">
已加载全部数据
</p>
</div>
</div>
<!-- 分页 -->
<el-pagination background layout="total,prev, pager, next, jumper" :total="total"
:page-size="18"@current-change="handleCurrentChange" :current-page.sync="cur_page">
</el-pagination>
</template>
<script>
export default {
data() {
return {
isloading: true,
imageData: [],
publicIsShow: true,
noMore: false, // 控制"没有更多与哦 "
routeLoad: false, //控制滚动禁用
scrollUserNoMore: false,
scrollUserLoading: false,// 控制"加载中"
total: 0,
cur_page: 0, //设置一个默认值
};
}
methods:{
// 滚动加载方法
infiniteScroll() {
this.routeLoad = true;
this.scrollUserLoading = true;
if (this.publicIsShow) {
this.publicIsShow = true;
this.cur_page += 1; // 页码每次滚动+1
}
this.findImagePulic(this.cur_page, 'infiniteScroll');
},
// 分页功能
handleCurrentChange(val) {
this.publicIsShow = false;
this.noMore = true;
this.findImagePulic(val, 'CurrentChange')
},
//图片滚动条
async findImagePulic(val, name) {
let list
const { data: res } = await findImage(val, 18, this.valueList, this.taskNumber)
if (res.code == 0 && res.data.records) {
this.total = Number(res.data.total);
if (name == 'infiniteScroll') {
list = res.data.records;
this.scrollUserLoading = false;
this.scrollUserNoMore = false;
this.noMore = false;
this.publicIsShow = true
for (let i = 0; i < list.length; i++) {
this.imageData.push(list[i]);
}
// 如果请求回来的数据小于pageSize,则说明数据到底了。
if (list.length < 18) {
this.noMore = true;
this.scrollUserNoMore = true;
}
//避免数据总条数是pageSize的倍数时,数据到底还会请求一次。
if (this.imageData.length === this.total) {
this.noMore = true;
this.scrollUserNoMore = true;
}
this.routeLoad = false;
} else {
this.imageData = []
this.publicIsShow = false;
this.noMore = false;
this.scrollUserNoMore = false;
this.loading = true;
this.type = this.valueList;
this.imageData = res.data.records;
for (var i = 0; i < this.imageData.length; i++) {
var id = this.imageData[i].id;
if (this.arrCkeckAll.indexOf(id, 0) != -1) {
this.imageData[i].checked = true;
} else {
this.imageData[i].checked = false;
}
}
this.loading = false;
}
}
},
}
}
</script>
<style lang="scss" scoped>
.infinite-list-wrapper {
.photo_box {
position: relative;
overflow-y: auto;
max-height: 700px;
width: 100%;
// border: 1px solid #ddd;
// padding: 0 16px
}
}
</style>
版权声明:本文标题:vue+elementUI实现分页+图片滚动加载请求数据 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1728256666a1151100.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论