Vue2 版本(不再更新) 卡片虚拟滚动(有需求的可以查看) 安装 npm install vue-waterfall-plugin-next 使用 import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next' import 'vue-waterfall-plugin-next/dist/style.css' // 数据 data: { list: [ { src: "xxxx.jpg", ... } ... ] } <Wate...
<waterfall :col="col"---col:划分几列,可以根据屏幕宽度来划分,其类型是数值型 :gutterWidth="20" :data="list"list:是请求到的每一页数据,由于分页,获取到的只有当前页数,因此列表循环的时候,使用List,即push上每一次page+1的数据 @loadmore="loadmore"当滑到页面底部后,需要加载新的数据 :lazyDistance="...
第一步:在自己的项目文件下安装vue-waterfall2 npm install --save vue-waterfall2 第二步:在main.js中引入 import waterfall from 'vue-waterfall2' Vue.use(waterfall) 第三步:在需要做瀑布流的页面写入 <waterfall :col='col' :width="itemWidth" :gutterWidth="gutterWidth" :data="dataList" @loadmor...
1.itemWidth需要与gutterWidth一起使用才会生效,否则会进行自适应宽度(使用rem布局时,需先计算出高度再传值) 2.使用了waterfall的组件不允许使用scoped,否则样式会有问题 main.js importwaterfallfrom'vue-waterfall2'Vue.use(waterfall) app.vue <template>loadmoremix5列8列10列<waterfall :col='col' :gutterWidth...
vue 移动端无限瀑布流 插件使用 瀑布流插件: import waterfall from 'vue-waterfall2' Vue.use(waterfall) <waterfall :col='col' :data="data" @loadmore="loadmore" @scroll="scroll" :isTransition=true> <template> {{item}}
文档地址:https://github.com/AwesomeDevin/vue-waterfall2/blob/master/CHINESE-README.md npm i vue-waterfall2@latest --save 2.引用 importwaterfallfrom'vue-waterfall2';Vue.use(waterfall); 3.html代码 <waterfall:col="2":data="data"@loadmore="loadmore"><template>{{item.name}}...
vue-waterfall has not supported<transition-group>in Vue 2 (#10) . Events ON ('reflow') { reflow }// trigger reflow action: waterfallVm.$emit('reflow') AFTER ( reflow ) { emit'reflowed'}// waterfallVm.$on('reflowed', () => { console.log('reflowed') }) ...
vue-waterfall2 1.不需知道元素宽高,可宽高自适应 2.支持无图模式或内嵌视频、音频等,内容自定义程度高 3.支持懒加载(lazy-src) 4.提供Event:loadmore (pc/android端滑动到底部触发,ios端需要上拉触发) 5.使用极…
一、vue-waterfall waterfall是一个vue.js瀑布流布局组件,基于vue2.x 安装: 代码语言:javascript 复制 npm install--save vue-waterfall Vue-waterfall是一个UMD模块,可以在CommonJS和AMD模块化环境中用作模块。在非模块化环境中,Waterfall将注册为全局变量。
vue中使用vue-waterfall2来实现瀑布流 vue中使⽤vue-waterfall2来实现瀑布流 在很多项⽬中，会有图⽂列表或者图⽚列表的出现，图⽚宽度好设定，但是⾼度往往不能设置成定值，⼀旦图⽚长款不成⽐例，就会显得很难看。所以使⽤瀑布流可以完美实现这个问题，图⽚只需要设定宽度，⾼度⾃适应，就...