介绍
小编给大家分享一下vue如何实现网络图片瀑布流,下拉刷新,上拉加载更多的功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
<强>一、思路分析和效果图
用vue来实现一个瀑布流效果,加载网络图片,同时有下拉刷新和上拉加载更多功能效果,然后针对这几个效果的实现,捋下思路:
根据加载数据的顺序,依次追加标签展示效果;
选择哪种方式实现瀑布流,这里选择绝对定位方式;
关键问题:由于每张图片的宽高不一样,而瀑布流中要求所有图片的宽度一致,高度随宽度等比缩放。而且由于图片的加载是异步延迟。在不知道图片高度的情况下,每个图片所在盒的项目子不好绝对定位。因此在渲染页面前先获取所有图片的高度,是解决问题的关键点!这里选择用JS中类的图像,通过预加载图片的方式提前获取图片宽高,另外通过一个临时变量来计算是否所有图片的高度已经得到。当所有的图片高度获取后,开始渲染页面。
页面渲染后,获取所有图片所在的盒子,循环计算盒子的高度,开始设置每个盒子条目的绝对定位。
页面渲染时,会出现闪烁的现象。如何解决这个问题呢?这里用了一个动画样式。不过在第一次加载的时候,还是会有一点闪烁的感觉。
然后就是下拉刷新和上拉加载更多的效果,这里用了有赞的vant组件PullRefresh和列表这套组合组件来实现。
先看个效果动图:
静态截图:
<强>二,具体实现步骤
2.1,页面结构设计,测试数据准备。
,本地准备一个json文件数据,放在项目公共文件夹下。注意,本地测试数据必须放在公共文件夹下,网络请求时才能请求到数据,这是vue3。x。新增加一个axios依赖包,用来进行网络请求。部分截的图,及关键代码:
//数据请求
getDataList () {
这。美元axios.get (“/json/dataList.json") ((res)=祝辞{
let 才能;list =, res.data.data ?, res.data.data:, [];
if 才能;(list.length 祝辞,0){//从列表中才能取页大小条数据出来
var 才能;tempList =, [];
for 才能;(let 小姐:=,0;,小姐:& lt;, this.pageSize;,我+ +){
,,if (list.length 祝辞,0){
,,let tempIndex =,方法(math . random (), *, 1000), %, list.length;
,,tempList.push(列表(tempIndex));
,,list.splice (tempIndex, 1);
,,}
,,}
this.loadImagesHeight才能(tempList);,//模拟预加载图片,获取图片高度
,,}
else {才能
this.loadImagesHeight才能(列表),,
,,}
,}).catch ((res)=祝辞{
console.log才能(“. .失败:,,,,res);
这才能。美元toast.clear ();
this.isLoading 才能=,假的,,//下拉刷新请求完成
this.loading 才能=,假的,,//上拉加载更多请求完成
,})
}, 2.2,预加载图片,存储图片高度
获取数据后,遍历数据数组、预加载图片,计算图片缩放后的高度,存储起来。同时由于图片加载是异步加载,所以用变量计数,当最后一个图片加载完成后,开始渲染页面。
loadImagesHeight(列表){
var 才能;count =, 0;,//用来计数,表示是否所有图片高度已经获取
list.forEach才能((项目,,指数)=祝辞{
,,//创建图片对象,加载图片,计算图片高度
,,var img =, new 图像();
,,img.src =, item.cover;
,,img.onload =, img.onerror =, (e)=祝辞{
,,计数+ +;
,,if (e.type ==, & # 39;负载# 39;){,//图片加载成功
,,,//计算图片缩放后的高度:图片原高度/原宽度,=,缩放后高度/缩放后宽度
,,,(指数).imgHeight 列表;=,Math.round (img.height *, this.boxWidth /, img.width);
,,,//,console.log(& # 39;指数:,& # 39;,,指数,& # 39;,,load 往下,,imgHeiht:, & # 39;,,列表(指数).imgHeight);
,,}
,,,其他的{//图片加载失败,给一个默认高50度
,,,(指数).imgHeight 列表;=,50;
,,,console.log(“指数:,,,,指数,,,,,加载报错:“,,e);
,,}
,,//加载完成最后一个图片高度,开始下一步数据处理
,,if (count ==, list.length) {
,,,this.resolveDataList(列表);
,,}
,,}
})才能
},
