vue中使用vue-waterfall2来实现瀑布流

在很多项目中，会有图文列表或者图片列表的出现，图片宽度好设定，但是高度往往不能设置成定值，一旦图片长款不成比例，就会显得很难看。

所以使用瀑布流可以完美实现这个问题，图片只需要设定宽度，高度自适应，就可以完美实现。

下边我们来说说怎样来实现------------------这个是针对图片以及带文字的卡片

1：安装

yarn add vue-waterfall2

2：引用，在main.js中引用

import waterfall from 'vue-waterfall2'
Vue.use(waterfall)

3：正式使用

  <div class="container-water-fall case">　　　　　　　　其中case以及case_item是卡片的样式，　　　　　　　　　　　　　　　　<waterfall:col="col"---------col:划分几列，可以根据屏幕宽度来划分，其类型是数值型:gutterWidth="20":data="list"　　　　　　　　list:是请求到的每一页数据，由于分页，获取到的只有当前页数，因此列表循环的时候，使用List,即push上每一次page+1的数据@loadmore="loadmore"　　当滑到页面底部后，需要加载新的数据:lazyDistance="200"><template><divclass="case_item cell-item"v-show="List.length!==0"v-for="(item) in List":key="item._id"><div class="imgs"><imgsrc="https://scdn.xidong360.com/201909/a20e2e94d1664992abecab9a03afa1f1.png?x-oss-process=style/thumb"class="image"/></div><div class="case_bottom"><h6>俱乐部名称</h6><p>在中台产品的研发过程中，会出现不同的设计规范和实现</p><p style="margin:0;"><v-btn class="case_action" small  text color="primary">编辑</v-btn><v-btn class="case_action" small  text color="#aaa">删除</v-btn></p></div></div></template></waterfall></div>

　　方法：

　1：list与List(只写了部分)

 　　　　　　if (this.page === 1) {this.List = [];setTimeout(() => {this.List = res.data.data;------------当时第一页时，将数据赋值给List}, 50);} else {this.List = this.List.concat(res.data.data);----------当页码大于第一页时，List拼接到后面的数组}

　2：col

getcol() {if (this.width > 1580) {this.col = 4;} else if (1024 < this.width < 1580) {this.col = 3;} else if (768 < this.width < 1024) {this.col = 2;}},

3：loadmore：监听当前页面加载完成-------------该页面使用了watch监听page，因此page++后未调取this.getdata();可根据需要自行调取

loadmore1() {if (this.page <= this.length && this.loadmore) {this.page++;}
},

vue中使用vue-waterfall2来实现瀑布流相关推荐

vue中App.vue的主要作用
app.vue中不但可以当做是网站首页,也可以写所有页面中公共需要的动画或者样式.不在上面写代码也可以. app.vue是主组件,是页面入口文件,是vue页面资源的首加载项.所有的页面都是在app.v ...
使用 Vue 从零开始手写一个猫咪瀑布流组件
点击上方前端Q,关注公众号回复加群,加入前端Q技术交流群猫咪瀑布流如下动态图,一张张不规则的可爱猫咪照片是否勾起了你的少女心呢? 瀑布流又称瀑布流式布局,是比较流行的一种网站页面布局方式.瀑布 ...
H5，小程序中实现小红书式排序瀑布流(横向排序) macy插件实际使用
需求: 瀑布流排序非等长的块级一排两个样式图如下: (先直接讲解决方案,后续放原生3种方式的缺点,有兴趣往后看) 解决方案: 使用 Macy.js 插件官网:http://macyjs.com/ ...
Vue 中 qrcode.vue 生成二维码以及添加中心logo
一.安装插件 npm i qrcode.vue -S 二.使用组件 <template><van-popupv-model="showQr"v-bind=&quo ...
日常总结：Vue实现一个炫酷的代码瀑布流背景
先看一下效果: 代码奉上: <template><canvas id="canvas" /> </template><script> ...
vue中使用video.js 播放m3u8直播流
需求描述支持播放m3u8直播流 + 录屏视频:同时可以动态更改视频直播地址,新增,删除视频. 实现效果实现代码安装依赖 npm install video.js --save // 视频播放器 ...
瀑布流插件vue-masonry
前言之前其实有分享过一篇纯CSS实现瀑布流的方法: https://oliver.blog.csdn.net/article/details/126450691,但纯CSS实现的方案都不是比较好的方 ...
用 vue 实现瀑布流
最近看到一篇使用vue从零开始手写一个猫咪瀑布流组件(支持ssr),讲了关于如何用 Vue 来实现瀑布流,学习后自己动手写了一个简单的 demo. 源码瀑布流又称瀑布流式布局,是比较流行的一种网站页 ...
vue 中provide的用法_聊聊Vue中provide/inject的应用详解
众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数 ...
关于Vue中$nextTick的作用及实现原理(Vue进阶)
Hello,大家好,最近找工作的路途依然艰难,但是要一直保持对技术的热爱!今天继续跟大家探索一下Vue进阶的内容,这次研究一下Vue的全局API中的$nextTick,这是一个很常用,也是经典的API ...

vue中使用vue-waterfall2来实现瀑布流

vue中使用vue-waterfall2来实现瀑布流相关推荐

最新文章

热门文章