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...
一、vue-waterfall waterfall是一个vue.js瀑布流布局组件,基于vue2.x 安装: 代码语言:javascript 代码运行次数:0 运行 AI代码解释 npm install--save vue-waterfall Vue-waterfall是一个UMD模块,可以在CommonJS和AMD模块化环境中用作模块。在非模块化环境中,Waterfall将注册为全局变量。 引入: ES6 代码语言:javascri...
<waterfall :col="col"---col:划分几列,可以根据屏幕宽度来划分,其类型是数值型 :gutterWidth="20" :data="list"list:是请求到的每一页数据,由于分页,获取到的只有当前页数,因此列表循环的时候,使用List,即push上每一次page+1的数据 @loadmore="loadmore"当滑到页面底部后,需要加载新的数据 :lazyDistance="...
2. 使用了`waterfall`的父组件,如果样式存在问题,可去掉css `scoped`尝试一下 main.js import waterfall from 'vue-waterfall2' Vue.use(waterfall) app.vue <template> loadmore mix 5列 8列 10列 <waterfall :col='col' :width="itemWidth" :gutterWidth="gutterWidth" :data="data" @loadmore="lo...
1.安装 npm install vue-waterfall2@1.8.20 --save (提示:一定要安装1.8.20,最新版会有一部分问题) 2.打开main.js文件 import waterfall from 'vue-waterfall2&
vue-waterfall21.不需知道元素宽高,可宽高自适应2.支持无图模式,内容自定义程度高3.支持懒加载(lazy-src)4.提供Event:loadmore (pc/android端滑动到底部触发...
Vue2 瀑布流组件 vue 瀑布流插件,支持 PC 和移动端,支持 animate 的所有动画效果,支持图片懒加载 在线演示地址 vue3 版本 安装 npm install vue-waterfall-plugin 使用 import{LazyImg,Waterfall}from'vue-waterfall-plugin'import'vue-waterfall-plugin/dist/style.css' ...
vue 移动端无限瀑布流 插件使用 瀑布流插件: import waterfall from 'vue-waterfall2' Vue.use(waterfall) <waterfall :col='col' :data="data" @loadmore="loadmore" @scroll="scroll" :isTransition=true> <template> {{item}}
Bin/vue-waterfall2 加入Gitee 与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :) 免费加入 已有帐号?立即登录 master 克隆/下载 git config --global user.name userName git config --global user.email userEmail 分支8 标签6 ...
Waterfall adaptive plugin for vue and support lazy load , so easy! - GitHub - AwesomeDevin/vue-waterfall2: Waterfall adaptive plugin for vue and support lazy load , so easy!