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 相关文章推荐
javascript编程起步(第二课)
Jan 10 Javascript
php gethostbyname获取域名ip地址函数详解
Jan 24 Javascript
Dom 结点创建 基础知识
Oct 01 Javascript
你必须知道的JavaScript 变量命名规则详解
May 07 Javascript
css配合jquery美化 select
Nov 29 Javascript
jQuery事件绑定和委托实例
Nov 25 Javascript
jQuery解析json格式数据简单实例
Jan 22 Javascript
JavaScript函数节流概念与用法实例详解
Jun 20 Javascript
js模式化窗口问题![window.dialogArguments]
Oct 30 Javascript
微信小程序 获取javascript 里的数据
Aug 17 Javascript
解决layui 表单元素radio不显示渲染的问题
Sep 04 Javascript
深入理解 TypeScript Reflect Metadata
Dec 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
第1次亲密接触PHP5(2)
2006/10/09 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
讨论javascript(一)工厂方式 js面象对象的定义方法
2009/12/15 Javascript
HTML5附件拖拽上传drop &amp; google.gears实现代码
2011/04/28 Javascript
javascript 基础篇2 数据类型,语句,函数
2012/03/14 Javascript
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
2013/12/17 Javascript
JQuery中clone方法复制节点
2015/05/18 Javascript
BootStrap中Datepicker控件带中文的js文件
2016/08/10 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
微信小程序switch组件使用详解
2018/01/31 Javascript
vue项目中axios使用详解
2018/02/07 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
2018/12/14 Javascript
bootstrap下拉分页样式 带跳转页码
2018/12/29 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
Python增量循环删除MySQL表数据的方法
2016/09/23 Python
在python里协程使用同步锁Lock的实例
2019/02/19 Python
Django项目之Elasticsearch搜索引擎的实例
2019/08/21 Python
python3 简单实现组合设计模式
2020/07/02 Python
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
NYX Professional Makeup官方网站:专业彩妆和美容产品
2019/10/29 全球购物
公交公司毕业生求职信
2014/02/15 职场文书
美国留学经济担保书
2014/05/20 职场文书
企业标语口号
2014/06/10 职场文书
工商管理自荐书
2014/07/06 职场文书
ktv好的活动方案
2014/08/15 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
给上级领导的感谢信
2015/01/22 职场文书
生日宴会家属答谢词
2015/09/29 职场文书
2016新党章学习心得体会
2016/01/15 职场文书
2016企业先进集体事迹材料
2016/02/25 职场文书
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
2021/04/17 Vue.js