vue移动端实现下拉加载更多,vue 滚动加载
这篇文章主要介绍了某视频剪辑软件实现下拉滚动加载数据的示例，帮助大家更好的理解和学习使用某视频剪辑软件框架，感兴趣的朋友可以了解下
目录
第一步：安装第二步：引用第三步：使用网项目经常会用到下拉滚动加载数据的功能，今天就来种草vue-无限负载这个插件，讲解一下使用方法！
第一步：安装
新公共管理安装vue-无限-加载-保存
第二步：引用
从“vue-无限加载”导入无限加载
导出默认值{
组件：{ InfiniteLoading }
}
第三步：使用
1.基本用法
模板
span v-text=item/span /p！-无限负载这个组件要放在列表的底部，滚动的盒子里面！-infinite-loading @ infinite= infinite handler /infinite-loading/div/template脚本从 vue-infinite-loading 导入无限加载；
导出默认值{
data() {
返回{
列表：[]
};
},
方法：{
infiniteHandler($state) {
//这里模仿加载延迟一秒钟
setTimeout(()={
let temp=[]；
对于(设我=这个。列表。长度1；我=这个。列表。长度20；i ) {
在…之时推(一)；
}
这个。列表=这个。列表。concat(temp)；
$州。loaded()；
}, 1000);
},
},
组件：{ InfiniteLoading }
}/脚本
2.分页用法
模板
差异
保险商实验所
Li class= hacker-news-item v-for=(item，key) in list/li
/ul
无限加载@infinite=infiniteHandler
span slot=没有更多的不再有数据/span
/无限加载
/div
/模板
脚本
从“vue-无限加载”导入无限加载
从" axios "导入axios
导出默认值{
data() {
返回{
列表：[]
};
},
方法：{
infiniteHandler($state) {
让API= http://XXX。com/XXX ；
//api为你请求数据地址
axios.get(api，{
参数：{
//页码参数(10条每页)
page: this.list.length/10 1，
},
}).然后((响应)={
if (response.data.length) {
//response.data为你请求接口返回的数组列表
这个。列表=这个。列表。concat(响应。数据)；
$州。loaded()；
if (this.list.length/10===10) {
//这里是加载了10页数据，设置不在加载
$州。完成()；
}
}否则{
$州。完成()；
}
});
}
},
组件：{ InfiniteLoading }
};
/脚本
说明：$state:该组件会传递一个特殊的事件参数$州给事件处理器来改变加载状态，$州参数包括三个方法，它们是加载方法，完成方法和重置方法。
加载方法用于在每次加载数据后停止播放动画，然后该组件将准备好进行下一次触发。
完成方法用于完成完整的无限加载，则该组件将不再处理任何滚动操作。如果在加载调用完成方法时永远不会调用该方法，则此组件将显示用户的结果消息，如果不是，则将显示不再有用户消息，并且可以按狭槽设置其它内容
重置方法是将组件返回到原来的状态
3.条件用法
模板
div class=黑客新闻列表
div class=黑客新闻标题
！-下拉改变-
select v-model= tag @ change= change filter()
期权价值="故事"故事/期权
选项值=历史历史/选项
/选择
！-或者点击改变-
button @click=changeFilter()搜索/按钮
/div
保险商实验所
Li class= hacker-news-item v-for=(item，key) in list/li
/ul
！-不要忘记设置这个ref=无限加载-
无限加载@ infinite= infinite handler ref=无限加载
span slot=没有更多的不再有数据/span
/无限加载
/div
/模板
脚本
从“vue-无限加载”导入无限加载
从" axios "导入axios
导出默认值{
data() {
返回{
列表：[],
标签:"故事",
};
},
方法：{
infiniteHandler($state) {
const API= http://XXX。com/XXX ；
//api为你请求数据地址
axios.get(api，{
参数：{
//改变的条件参数
标签:this.tag，
page: this.list.length/10 1，
},
}).然后(({ data })={
if (data.result.length) {
这个。列表=这个。列表。concat(数据。结果)；
$州。loaded()；
if (this.list.length/20===10) {
状态。完成()；
}
}否则{
$州。完成()；
}
});
},
//改变条件条用此方法
changeFilter() {
这个。list=[]；
这个. nextTick(()={
这个参考文献。无限负荷。$ emit($无限加载：重置))；
});
},
},
组件：{ InfiniteLoading }
}
/脚本
官方链接：https://桃脚本。github。输入/输出-无限加载/
开源代码库链接：https://github。com/桃子脚本/vue-无限加载
以上就是某视频剪辑软件实现下拉滚动加载数据的示例的详细内容，更多关于某视频剪辑软件下拉滚动加载数据的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。