如何用Vue vant-ui实现下拉刷新和上拉加载功能？

本文共计2426个文字，预计阅读时间需要10分钟。

目录+知识要点速记+基本用法+下拉刷新+代码实现

1.页面布局+2. 样式+3. 方法+下拉刷新效果：

+知识要点速记+基本用法+List通过loading和finished两个变量控制加载状态，当组件滚动到底部时，会+加载更多。

目录

• 知识点速记
• 基本用法
• 下拉刷新
• 代码实现
• 1.页面布局
• 2.样式
• 3.方法

下拉刷新效果：

知识点速记

基本用法

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

下拉刷新

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