猿创征文｜vue vant-ui数据列表上拉加载更多，下拉刷新功能

⭐️⭐️⭐️  作者：船长在船上
🚩🚩🚩  主页：来访地址船长在船上的博客
🔨🔨🔨  简介：优快云前端领域优质创作者，资深前端开发工程师，专注前端开发，在优快云总结工作中遇到的问题或者问题解决方法以及对新技术的分享，欢迎咨询交流，共同学习。

🔔🔔🔔   感谢：如果觉得博主的文章不错或者对你的工作有帮助或者解决了你的问题，可以关注、支持一下博主，如果三连收藏支持就会更好，在这里博主不胜感激！！！如有疑问可以留言、评论，看到后会及时回复。

功能需求：获取后端接口返回的数据，实现列表数据上滑加载更多下一页数据，下拉数据刷新功能，结合vant-ui框架实现。可直接参考使用。

下拉刷新效果：

目录

知识点速记

基本用法

下拉刷新

代码实现 

1.页面布局

2.样式

3.方法

---

知识点速记

基本用法

List 通过 loading 和 finished 两个变量控制加载状态，当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true。此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。若数据已全部加载完毕，则直接将 finished 设置成 true 即可。

下拉刷新

List 组件可以与PullRefresh组件结合使用，实现下拉刷新的效果。

 注意