Vue Element UI v-infinite-scroll无限触发问题解决+样例代码
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Vue Element UI v-infinite-scroll无限触发问题解决+样例代码,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2453字,纯文字阅读大概需要4分钟。
内容图文
官方文档:
ElementUI —— InfiniteScroll 无限滚动
根据文档这部分,写了我的代码,开始长下面这样子…结果发现了一个问题,就是进入页面之后像是 infinite-scroll-disabled和infinite-scroll-immediate没有生效似的,页面疯狂调用onLoad函数。
<div
class="left"
v-infinite-scroll="onLoad()"
infinite-scroll-disabled="disabled"
infinite-scroll-immediate="false"
>
<div v-for="item in demoList" :key="item.commentId"
<list-item :item="item" ></list-item>
</div>
<p v-if="listParams.loading">Loading...</p>
<p v-if="listParams.finished">No More</p>
</div>
度娘许久无果,于是逐字对比官方样例……最终将
v-infinite-scroll="onLoad()"
改为
v-infinite-scroll="onLoad"
成功解决问题…
放一个能正常运行的代码上来
<template>
<div class="container">
<div
class="left"
v-infinite-scroll="onLoad"
infinite-scroll-disabled="disabled"
infinite-scroll-immediate="false"
>
<div v-for="item in demoList" :key="item.commentId">
<list-item
:item="item"
></list-item>
</div>
<p v-if="listParams.loading">Loading...</p>
<p v-if="listParams.finished">No More</p>
</div>
</div>
</template>
<script>
import ListItem from "../../components/ListItem";
export default {
data() {
return {
demoList: [],
listParams: {
pageNum: 1,
pageSize: 10,
loading: false,
error: false,
finished: false,
},
};
},
components: {
ListItem,
},
created() {
this.getDemoList();
},
mounted() {},
computed: {
disabled() {
console.log(
this.listParams.loading || this.listParams.finished
);
return this.listParams.loading || this.listParams.finished;
},
},
methods: {
onl oad() {
this.listParams.loading = true;
if (this.listParams.finished == false) {
this.listParams.pageNum++;
this.getDemoList();
}
},
getDemoList() {
var that = this;
var params = {
pageNum: that.listParams.pageNum,
pageSize: that.listParams.pageSize,
};
this.$api.myHistoryController
.getDemoList(params)
.then((res) => {
if (res.status == 1000) {
if (res.body.list.length > 0) {
that.demoList = that.demoList.concat(res.body.list);
that.listParams.loading = false;
if (res.body.list.length < that.listParams.pageSize) {
that.listParams.finished = true;
}
} else {
that.listParams.loading = false;
that.listParams.finished = true;
}
}
that.listParams.loading = false;
})
.catch(function () {
that.listParams.error = true;
that.listParams.loading = false;
});
},
},
};
</script>
<style scoped>
#header {
display: none;
}
.container {
display: flex;
flex-direction: row;
height: 100%;
padding: 10px;
}
.left {
width: 400px;
flex-shrink: 0;
background-color: white;
overflow: auto;
}
</style>
内容总结
以上是互联网集市为您收集整理的Vue Element UI v-infinite-scroll无限触发问题解决+样例代码全部内容,希望文章能够帮你解决Vue Element UI v-infinite-scroll无限触发问题解决+样例代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。