基本概念

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-scrollbarstyle="height: 100%"wrap-class="scrollbar-wrapper"><divclass="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

https://blog.csdn.net/qq_35630674/article/details/102610722

Vue + Element UI——滚动条el-scrollerbar和无限滚动指令v-infinite-scroll整合解决方案相关推荐

vue element ui 滚动条
隐藏横滚动条 overflow-x: hidden; 设置高度 height: 700px; 代码 vue <template><el-scrol ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
nodeJs + webpack+vue+ element ui 环境安装
一.安装nodeJs 1.打开NodeJs官网:https://nodejs.org/en/download/ 点击下载 2.双击安装,安装过程基本直接"NEXT"就可以了.(w ...
bind-html自动换行,vue element ui this.$alert 样式修改，长词自动换行、自定义htm
vue element ui this.$alert 样式修改,长词自动换行.自定义htm vue element ui this.$alert 样式修改,长词自动换行.自定义html标签无效果问题 ...
Vue + Element UI 实现登陆注册基本demo实例
Vue + Element UI 实现权限管理系统前端篇(二):Vue + Element 案例导入项目打开 Visual Studio Code,File --> add Folder ...
基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架引言心声现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
【vue开发问题-解决方法】（五）vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function
[vue开发问题-解决方法](五)vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function 参考文章: (1)[vue开发问题-解决方法](五) ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...

Vue + Element UI——滚动条el-scrollerbar和无限滚动指令v-infinite-scroll整合解决方案

基本概念

官方文档

解决方案

参考文章

Vue + Element UI——滚动条el-scrollerbar和无限滚动指令v-infinite-scroll整合解决方案相关推荐

最新文章

热门文章