Vue 实现下拉加载更多

熟悉Element-UI的开发者可能都会有这样的经历，它的无限滚动 InfiniteScroll 并不好用，下面介绍两种下拉加载的实现方法：

1. 使用el-table-infinite-scroll 插件

1. 安装插件；

npm install --save el-table-infinite-scroll

2. 全局引入并注册；

// main.jsimport elTableInfiniteScroll from 'el-table-infinite-scroll';Vue.use(elTableInfiniteScroll);

3. 局部文件引入；

<script>
// 引入
import elTableInfiniteScroll from 'el-table-infinite-scroll';
export default {// 注册指令directives: {'el-table-infinite-scroll': elTableInfiniteScroll}
}
</script>

4. 使用指令；

<el-table :height="tableHeight" v-el-table-infinite-scroll="loadMore"></el-table>

5. 代码实例；

<template><div class="app-container"><el-table :height="tableHeight" v-el-table-infinite-scroll="loadMore" :data="tableList"><!-- 表格数据省略 --></el-table></div>
</template><script>
// 引入插件
import elTableInfiniteScroll from "el-table-infinite-scroll";export default {name: "index",data() {return {// 表格高度tableHeight:"",// 数据总数tableCount:0,// 表格数据列表tableList:[],// 是否加载中tableLoading:false,// 表格搜索条件tableSearch:{page:1}}},// 注册指令directives: {"el-table-infinite-scroll": elTableInfiniteScroll,},created() {let windowHeight =document.documentElement.clientHeight || document.body.clientHeight;// 动态计算表格的高度，200为屏幕内除了表格以外其他元素的高度，依实际情况而定this.tableHeight = windowHeight - 200 + "px";},mounted(){this.getTableData(this.tableSearch);},methods: {// 请求表格数据getTableData(search) {let page = search.page;let url = "index?page=" + page;// 首次打开页面要加载一次数据，为了防止数据过多自动触发滚动，此处需要置为加载中this.tableLoading = true;this.$http.get(url).then((result) => {if (res.code == 10000) {// 拼接数据this.tableList = this.tableList.concat(result.data.list);this.tableCount = result.count;this.tableSearch.page = result.current;this.tableLoading = false;}});},// 加载更多loadMore() {if (!this.tableLoading) {this.tableLoading = true;if (this.tableList.length < this.tableCount) {this.tableSearch.page++;this.getTableData(this.tableSearch);} else {this.$message("已加载完所有的数据！");this.tableLoading = false;}}},}
};
</script>

2. 自定义下拉加载方法

上面使用的插件需要依赖Element-UI，如果没有使用Element-UI，那就只能自己写一个下拉加载了，实现代码如下：

<template><div class="app-container"><div :style="{height:tableHeight,overflow:'auto'}" id="tableBox"><!-- 表格数据省略 --></div></div>
</template><script>
export default {name: "index",data() {return {// 表格高度tableHeight:"",// 数据总数tableCount:0,// 表格数据列表tableList:[],// 是否加载中tableLoading:false,// 表格搜索条件tableSearch:{page:1}};},created(){let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;// 动态计算表格的高度，200为屏幕内除了表格以外其他元素的高度，依实际情况而定this.tableHeight = windowHeight - 200 +'px';},mounted() {this.getTableData(this.tableSearch);document.getElementById("tableBox").addEventListener('scroll',this.onTableScroll); },beforeDestroy() {// 移除监听事件window.removeEventListener('scroll', this.onTableScroll)},methods: {onTableScroll(){var obj = document.getElementById("tableBox");var scrollHeight = obj.scrollHeight;var scrollTop = obj.scrollTop; var objHeight = obj.offsetHeight;  // 100为阈值，可根据实际情况调整    if(scrollHeight <= (scrollTop + objHeight + 100) && !this.tableLoading && this.tableList.length<this.tableCount){ this.tableLoading = true;this.tableSearch.page++;setTimeout(()=>{   this.getTableData(this.tableSearch);},300)}},getTableData(search){let page = search.page;let url = "index?page=" + page;// 首次打开页面要加载一次数据，为了防止数据过多自动触发滚动，此处需要置为加载中this.tableLoading = true;this.$http.get(url).then((result) => {if (res.code == 10000) {// 拼接数据this.tableList = this.tableList.concat(result.data.list);this.tableCount = result.count;this.tableSearch.page = result.current;this.tableLoading = false;}});},},
};
</script>

Vue 实现下拉加载更多相关推荐

H5 下拉加载更多(模拟微信聊天记录）
前言前段时间用H5实现一个实时聊天的功能.发现很难实现像微信聊天记录一样下拉加载更多记录.市面上大部分的 Web 项目实现的效果都是上拉加载,下拉刷新.下拉加载更多很少见,下拉在加载数据方面与上拉是 ...
下拉加载更多--判断页面距离
2019独角兽企业重金招聘Python工程师标准>>> /* *下拉加载更多使用 *底部小于50返回false--加载,否则不加载 * */ function lowEnough() ...
织梦ajax加载文章列表,织梦dedecms首页列表页ajax点击下拉加载更多文章瀑布流效果...
织梦dedecms实现点击下拉加载更多主要用到ajax技术.具体步骤如下: 一.首先找到并打开/plus/list.PHP文件,在里面找到如下代码: require_once(dirname(__FI ...
移动端下拉加载更多DEMO(纯js实现)
首先需要给div加scroll事件,监听滚动条滚动动作.那何时触发加载动作呢?当滚动条滚到底的时候.如何判断滚动条滚到底呢? 当滚动条的高度加上滚动条到div顶部的高度等于div的可滚动高度时,说明滚 ...
html5页面下拉加载更多_使您的产品页面销售更多的5条提示
html5页面下拉加载更多 Getting visitors to your website requires a great deal of work and, for many businesse ...
ant-design-vue select 可搜索下拉加载更多
1.搜索配置 showSearch 属性,支持单选模式可搜索. filterOption 是否根据输入项进行筛选. 当其为一个函数时,会接收 inputValue option 两个参数,当 opt ...
html下拉自动加载更多,H5页面下拉加载更多(实用版)
近期在做一个H5网站,需要下拉加载更多产品列表的功能.百度搜索了好久,什么说法都有,什么插件都有. 醉了.基本上每一个能直接拿来用的. 最后发现: 1.dropload.js 插件还可以,但是 ...
ASP.NET仿新浪微博下拉加载更多数据瀑布流效果
闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. ...
IM 聊天页面下拉加载更多--类似微信顺滑展示
背景领导在会议上说我们的 IM 聊天页面的用户体验不太好,尤其是下拉加载更多会跳动,让我优化一下.之前还确实没有注意到这一点,现场拿出手机和微信做对比,不比不知道,一比还真是发现了问题.微信 ...

Vue 实现下拉加载更多

1. 使用el-table-infinite-scroll 插件

2. 自定义下拉加载方法

Vue 实现下拉加载更多相关推荐

最新文章

热门文章