vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)


Posted in Javascript onJanuary 14, 2020

一、思路分析和效果图

用vue来实现一个瀑布流效果,加载网络图片,同时有下拉刷新和上拉加载更多功能效果。然后针对这几个效果的实现,捋下思路:

根据加载数据的顺序,依次追加标签展示效果;

选择哪种方式实现瀑布流,这里选择绝对定位方式;

关键问题:由于每张图片的宽高不一样,而瀑布流中要求所有图片的宽度一致,高度随宽度等比缩放。而且由于图片的加载是异步延迟。在不知道图片高度的情况下,每个图片所在的item盒子不好绝对定位。因此在渲染页面前先获取所有图片的高度,是解决问题的关键点!这里选择用JS中的Image类,通过预加载图片的方式提前获取图片宽高,另外通过一个临时变量来计算是否所有图片的高度已经得到。当所有的图片高度获取后,开始渲染页面。
页面渲染后,获取所有图片所在的盒子,循环计算盒子的高度,开始设置每个盒子item的绝对定位。
页面渲染时,会出现闪烁的现象。如何解决这个问题呢?这里用了一个动画样式。不过在第一次加载的时候,还是会有一点闪烁的感觉。
然后就是下拉刷新和上拉加载更多的效果,这里用了有赞的vant组件PullRefresh和List这套组合组件来实现。

先看个效果动图:

vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)

静态截图:

vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)

二、具体实现步骤

2.1、页面结构设计,测试数据准备。

 

本地准备一个json文件数据,放在项目public文件夹下。注意,本地测试数据必须放在public文件夹下,网络请求时才能请求到数据,这是vue3.x。新增加一个axios依赖包,用来进行网络请求。部分截图,及关键代码:

vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)

//数据请求
getDataList(){
 this.$axios.get("/json/dataList.json").then((res)=>{

  let list = res.data.data ? res.data.data: [];
  if (list.length > 0){
  //从list中取pageSize条数据出来
  var tempList = [];
  for (let i = 0; i < this.pageSize; i++){
   if (list.length > 0){
   let tempIndex = parseInt(Math.random() * 1000) % list.length;
   tempList.push(list[tempIndex]);
   list.splice(tempIndex, 1);
   }
  }
  this.loadImagesHeight(tempList); //模拟预加载图片,获取图片高度
  }
  else {
  this.loadImagesHeight(list); 
  }
 }).catch((res)=>{
  console.log("..fail: ", res);
  this.$toast.clear();
  this.isLoading = false; //下拉刷新请求完成
  this.loading = false; //上拉加载更多请求完成
 })
},

2.2、预加载图片,存储图片高度

获取数据后,遍历数据数组,预加载图片,计算图片缩放后的高度,存储起来。同时由于图片加载是异步加载,所以用变量计数,当最后一个图片加载完成后,开始渲染页面。

loadImagesHeight(list){
  var count = 0; //用来计数,表示是否所有图片高度已经获取
  list.forEach((item, index)=>{
   //创建图片对象,加载图片,计算图片高度
   var img = new Image();
   img.src = item.cover;
   img.onload = img.onerror = (e)=>{
   count++;
   if (e.type == 'load'){ //图片加载成功
    //计算图片缩放后的高度:图片原高度/原宽度 = 缩放后高度/缩放后宽度
    list[index].imgHeight = Math.round(img.height * this.boxWidth / img.width);
    // console.log('index: ', index, ', load suc, imgHeiht: ', list[index].imgHeight);
   }
   else{ //图片加载失败,给一个默认高度50
    list[index].imgHeight = 50;
    console.log("index: ", index, ", 加载报错:", e);
   }

   //加载完成最后一个图片高度,开始下一步数据处理
   if (count == list.length){
    this.resolveDataList(list);
   }
   }
  })
},

2.3、渲染页面,设置绝对定位

所有图片通过预加载获取图片高度后,开始渲染页面。然后遍历所有图片所在盒子标签,获取盒子高度,设置每个盒子的绝对定位。

resolveDataList(list){ //处理数据
  //下拉刷新,清空原数据
  if (this.pageIndex <= 1){
   this.itemCount = 0;
   this.dataList = [];
   this.lastRowHeights = [0, 0]; //存储每列的最后一行高度清0
  }
  if (list.length >= this.pageSize){
   this.pageIndex++; //还有下一页
  }
  else{
   this.finished = true; //当前tab类型下所有数据已经加载完成
  }
  //合并新老两个数组数据
  this.dataList = [...this.dataList, ...list];
  //判断页面是否有数据
  this.haveData = this.dataList.length > 0 ? 2 : 1;
  this.isLoading = false; //下拉刷新请求完成
  this.loading = false; //上拉加载更多请求完成
  console.log("...datalist: ", this.dataList);
  console.log("...this.isLoading: ", this.isLoading)
  this.$nextTick(()=>{
   setTimeout(()=>{
   //渲染完成,计算每个item宽高,设置标签坐标定位
   this.setItemElementPosition();
   this.isLoading = false; //下拉刷新请求完成
   this.loading = false; //上拉加载更多请求完成
   }, 1000)
  });
  },
  //获取每个item标签高度,设置item的定位
  setItemElementPosition(){
  let parentEle = document.getElementById('data-list-box');
  let boxEles = parentEle.getElementsByClassName("data-item");
  for (let i = this.itemCount; i < boxEles.length; i++){
   let tempEle = boxEles[i];
   //上一个标签最小高度的列索引
   let curColIndex = this.getMinHeightIndex(this.lastRowHeights);
   let boxTop = this.lastRowHeights[curColIndex] + this.boxMargin;
   let boxLeft = curColIndex * (this.boxWidth + this.boxMargin) + this.boxMargin;
   tempEle.style.left = boxLeft + 'px';
   tempEle.style.top = boxTop + 'px';
   this.lastRowHeights[curColIndex] = boxTop + tempEle.offsetHeight;
   // console.log('i = ', i, ', boxTop: ', boxTop, ', eleHeight: ', tempEle.offsetHeight);
  }
  this.itemCount = boxEles.length;
  //修改父级标签的高度
  let maxHeight = Math.max.apply(null, this.lastRowHeights);
  parentEle.style.height = maxHeight + 'px';
  this.$toast.clear();
  console.log("...boxEles: ", boxEles.length, ", maxH: ", maxHeight);
  },

2.4、其他说明

其他页面中如下拉刷新,和上拉加载更多等功能,使用了有赞的组件库中的PullRefresh 和 List这一套组合组件。感觉效果挺棒的,使用步骤也简单。另外就是在页面渲染时,会出现页面闪烁的现象,后面使用了一个css动画处理了这个现象,效果好了很多。但是在第一次加载的时候,还是有轻微的闪烁现象。等后面找到更好的方法,再更新。

完整效果DEMO地址:https://github.com/xiaotanit/tan_vue/blob/master/src/views/PageWaterFall.vue

总结

以上所述是小编给大家介绍的vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jqgrid 简单学习笔记
May 03 Javascript
javascript 基础篇2 数据类型,语句,函数
Mar 14 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
javascript实现状态栏中文字动态显示的方法
Oct 20 Javascript
JavaScript中日期的相关操作方法总结
Oct 24 Javascript
AngularJS ng-template寄宿方式用法分析
Nov 07 Javascript
详解node-ccap模块生成captcha验证码
Jul 01 Javascript
浅谈关于iview表单验证的问题
Sep 29 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
详释JavaScript执行环境与执行栈
Apr 02 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
解析原来浏览器原生支持JS Base64编码解码
Aug 12 Javascript
vue页面加载时的进度条功能(实例代码)
Jan 13 #Javascript
微信小程序canvas截取任意形状的实现代码
Jan 13 #Javascript
js实现列表向上无限滚动
Jan 13 #Javascript
vue 组件销毁并重置的实现
Jan 13 #Javascript
VUE实现自身整体组件销毁的示例代码
Jan 13 #Javascript
微信小程序聊天功能的示例代码
Jan 13 #Javascript
js实现适配移动端的拖动效果
Jan 13 #Javascript
You might like
生成随机字符串和验证码的类的PHP实例
2013/12/24 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
2017/04/03 PHP
关于laravel 子查询 &amp; join的使用
2019/10/16 PHP
js no-repeat写法 背景不重复
2009/03/18 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
2013/01/27 Javascript
javascript 兼容各个浏览器的事件
2015/02/04 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
浅谈js中字符和数组一些基本算法题
2016/08/15 Javascript
vue.js指令v-model实现方法
2016/12/05 Javascript
JS弹性运动实现方法分析
2016/12/15 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
2016/12/16 Javascript
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
2017/01/04 Javascript
JavaScript 事件对内存和性能的影响
2017/01/22 Javascript
node.js入门教程之querystring模块的使用方法
2017/02/27 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
Windows下Node.js安装及环境配置方法
2017/09/18 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
react中实现搜索结果中关键词高亮显示
2018/07/31 Javascript
jQuery中$原理实例分析
2018/08/13 jQuery
浅谈针对Vue相同路由不同参数的刷新问题
2018/09/29 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
2020/12/04 Vue.js
python中logging库的使用总结
2017/10/18 Python
PyQt实现界面翻转切换效果
2018/04/20 Python
Pycharm+Python工程,引用子模块的实现
2020/03/09 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
Python3爬虫ChromeDriver的安装实例
2021/02/06 Python
python装饰器代码深入讲解
2021/03/01 Python
单位介绍信范文
2014/01/18 职场文书
校园十佳歌手策划书
2014/01/22 职场文书
财务部经理岗位职责
2014/02/03 职场文书
培训研修方案
2014/06/06 职场文书
十八大标语口号
2014/10/09 职场文书
工作经历证明书范文
2014/11/02 职场文书
Python中rapidjson参数校验实现
2021/07/25 Python