vue上拉加载更多,vue下拉加载
这篇文章主要为大家详细介绍了某视频剪辑软件实现下拉加载更多，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
熟悉元素-用户界面的开发者可能都会有这样的经历，它的无限滚动无限小球并不好用，下面介绍两种下拉加载的实现方法：
1. 使用el-table-infinite-scroll 插件
(1).安装插件
新公共管理安装-保存埃尔-表格-无限滚动
(2).全局引入并注册
//main.js
从" El-表格-无限卷轴"导入无限小滚动
vue。使用(elTableInfiniteScroll)；
(3).局部文件引入
脚本
//引入
从" El-表格-无限卷轴"导入无限小滚动
导出默认值{
//注册指令
指令：{
“El-table-infinite-scroll”:eltable无限滚动
}
}
/脚本
(4).使用指令
El-table:height= tableHeight v-El-table-infinite-scroll= load more
/el-table
(5).代码实例
模板
div class=应用程序容器
El-table:height= tableHeight v-El-table-infinite-scroll= load more :data= table list
！-表格数据省略-
/el-table
/div
/模板
脚本
//引入插件
从" El-表格-无限卷轴"导入无限小滚动
导出默认值{
名称："索引",
data() {
返回{
//表格高度
表格高度：,
//数据总数
表计数：0,
//表格数据列表
表列表：[],
//是否加载中
tableLoading:false，
//表格搜索条件
表搜索：{
第一页
}
}
},
//注册指令
指令：{
El-table-infinite-scroll :El table无限滚动，
},
已创建(){
设窗口高度=文档。文档元素。客户高度 文档。身体。客户身高；
//动态计算表格的高度，200为屏幕内除了表格以外其他元素的高度，依实际情况而定
这个。tableheight=窗口高度-200 px ；
},
已安装(){
这个。gettabledata(这个。表搜索)；
},
方法：{
//请求表格数据
getTableData(搜索){
let page=search.page
让url=index？page= page
//首次打开页面要加载一次数据，为了防止数据过多自动触发滚动，此处需要置为加载中
this.tableLoading=true
这个http.get(url).然后((结果)={
if (res.code==10000) {
//拼接数据
这个。表列表=这个。表列表。concat(结果。数据。列表)；
这个。表计数=结果。数数；
这个。表格搜索。页面=结果。当前；
this.tableLoading=false
}
});
},
//加载更多
loadMore() {
如果(!this.tableLoading) {
this.tableLoading=true
如果(这个。表列表。长度这个。表计数){
这个。表格搜索。页面；
这个。gettabledata(这个。表搜索)；
}否则{
这个. $消息(已加载完所有的数据!);
this.tableLoading=false
}
}
},
}
};
/脚本
2. 自定义下拉加载方法
上面使用的插件需要依赖元素-UI，如果没有使用元素-UI，那就只能自己写一个下拉加载了，实现代码如下：
模板
div class=应用程序容器
div :style={height:tableHeight，overflow:auto} id=tableBox
！-表格数据省略-
/div
/div
/模板
脚本
导出默认值{
名称："索引",
data() {
返回{
//表格高度
表格高度：,
//数据总数
表计数：0,
//表格数据列表
表列表：[],
//是否加载中
tableLoading:false，
//表格搜索条件
表搜索：{
第一页
}
};
},
已创建(){
设窗口高度=文档。文档元素。客户高度 文档。身体。客户身高；
//动态计算表格的高度，200为屏幕内除了表格以外其他元素的高度，依实际情况而定
这个。tableheight=窗口高度-200 px ；
},
已安装(){
这个。gettabledata(这个。表搜索)；
文档。getelementbyid( tableBox ).addEventListener(scroll ，this。ontablescroll)；
},
销毁前(){
//移除监听事件
窗户。removeeventlistener( scroll ，this.onTableScroll)
},
方法：{
onTableScroll(){
var obj=文档。getelementbyid( tableBox )；
var滚动高度=obj。滚动高度；
var scroll top=obj。滚动顶部；
var obj height=obj。偏移高度；
//100为阈值，可根据实际情况调整
if(scroll height=(scroll top obj height 100)！这个。桌子加载这个。表列表。长度这个。表计数){
this.tableLoading=true
这个。表格搜索。页面；
setTimeout(()={
这个。gettabledata(这个。表搜索)；
},300)
}
},
getTableData(搜索){
let page=search.page
让url=index？page= page
//首次打开页面要加载一次数据，为了防止数据过多自动触发滚动，此处需要置为加载中
this.tableLoading=true
这个http.get(url).然后((结果)={
if (res.code==10000) {
//拼接数据
这个。表列表=这个。表列表。concat(结果。数据。列表)；
这个。表计数=结果。数数；
这个。表格搜索。页面=结果。当前；
this.tableLoading=false
}
});
},
},
};
/脚本
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。