Vue + Element UI——滚动条el-scrollerbar和无限滚动指令v-infinite-scroll整合解决方案
基本概念el-scrollbar:Element UI隐藏组件。注意事项:1.el-scrollbar的父层要有固定高度2.el-scrollbar的高度要设成100%3.如果出现横滚动条,添加overflow-x:hidden;无限滚动指令v-infinite-scroll:滚动至底部时,加载更多数据。官方文档https://element.eleme....
·
基本概念
el-scrollbar:Element UI隐藏组件。
注意事项:
1.el-scrollbar的父层要有固定高度
2.el-scrollbar的高度要设成100%
3.如果出现横滚动条,添加overflow-x:hidden;
无限滚动指令v-infinite-scroll:滚动至底部时,加载更多数据。
官方文档
https://element.eleme.cn/#/zh-CN/component/infiniteScroll
解决方案
<template>
<el-scrollbar
style="height: 100%"
wrap-class="scrollbar-wrapper">
<div
class="infinite-list"
v-infinite-scroll="load"
infinite-scroll-delay="1000">
<div v-for="i in count" class="infinite-list-item">{{ i }}</div>
</div>
</el-scrollbar>
</template>
<script>
export default {
name: "DEMO",
data () {
return {
count: 0
}
},
methods: {
load () {
this.count += 2
}
}
}
</script>
<style>
.scrollbar-wrapper {
overflow-x: hidden !important;
}
</style>
参考文章
https://shentuzhigang.blog.csdn.net/article/details/105150901
更多推荐
已为社区贡献22条内容
所有评论(0)