链氪巴士
  1. 首页
  2. 站点导航
  3. 文章
  4. 快讯
  5. 软件
  6. 书刊
  7. 关于

vue-waterfall-easy:vue瀑布流组件(vue-waterfall-easy2.x)

vue - waterfall - easy是一个vue组件,包含瀑布流布局和无限滚动加载功能。安装方式多样,支持多种导入方式。有丰富的属性、事件、方法和插槽。在使用时,通过特定的标签和属性设置来实现功能,如在中设置组件标签,指定数据数组和相关事件方法等。在移动端使用时需在ind...

访问官网 →

【Github】项目名:vue – waterfall – easy:vue瀑布流组件(vue – waterfall – easy2.x)

项目简介

这是一个vue组件,包含瀑布流布局和无限滚动加载功能。与其他实现相比,它不需要在返回数据中指定图像的宽度和高度,图像会预加载然后布局,布局具有响应性,可适配移动端,使用简单。

项目使用

  1. 安装:可通过 npminstall vue - waterfall - easy--save 安装。支持es6 import、scripts导入等多种方式。
  2. 基本示例:在中使用 <vue - waterfall - easy:imgsArr="imgsArr" @scrollReachBottom="getData"></vue - waterfall - easy>,其中 imgsArr 是渲染瀑布流所需的数据数组,getData 方法用于获取新数据。
  3. 支持多种属性(props):如 width 用于设置容器宽度,height 用于设置容器高度,imgsArr 是必须的用于渲染的数据数组等。
  4. 包含多种事件(event):如 scrollReachBottom 当滚动条滚动到底部时触发获取新图像数据的请求,click 当卡片被点击时触发等。
  5. 还支持多种方法(methods)和插槽(slot),如 waterfallOver 方法用于在滚动加载数据结束时手动移除滚动事件,插槽可用于自定义图片描述元素、加载元素、瀑布流容器头部等。
  6. 在移动端使用时,不要忘记在 index. 的 <head> 中添加 <metaname="viewport"content="width=device - width,initial - scale=1,maximum - scale=1,user - scalable=no">。

项目总结

vue – waterfall – easy是一个功能丰富的vue瀑布流组件,它在实现瀑布流布局和无限滚动加载方面有着自己的特点和优势,希望大家能尝试使用这个组件,如果有任何问题或者建议欢迎在下方留言讨论。

项目地址

GitHub链接直达