vant组件中的van-list(中有上拉加载,下拉刷新)

上拉刷新

名单通过组件loading状语从句:finished两个变量控制加载状态,当组件滚动到底部时,触发会load事件并将loading设置分类中翻译true。此时可以发起异步操作并更新数据,数据更新完毕后,将loading设置分类中翻译false即可。若数据已全部加载完毕(后台没有数据了),则直接将finished设置成true。
是否全部加载完需要判断 一般是返回的长度等于0,就代表全部加载完了,就可以把finished设置为true了
上拉加载是请求回来的数据通过push添加到尾

下拉刷新页面(加载最新的)

注意下拉刷新页面指的是请求后来的数据通过unshift添加到头
image.png

如果有上拉加载,同时也要实现下拉刷新,这个时候就需要如上图用下拉刷新的标签包住上拉加载的标签

图片懒加载(在vant中搜图片就能找到)
设置lazy-load属性来开启图片懒加载,需要搭配Lazyload组件使用。也就是给图片的标签上先设置lazy-load
image.png
也就是说给需要懒加载的图片设置lazy-load,同时需要在main.js中
导入 lay-load,并且挂载到vue上 Vue.use(lazyload),是一个命令。就算在main.js中全局引入了Vant组件库,还是需要引入并挂载这个命令
才能实现图片懒加载的效果