uniapp开发:瀑布流 灵活配置 简单易用 兼容vue2vue3小程序、H5、app等多端

您所在的位置:网站首页 uniapp制作微信小程序 uniapp开发:瀑布流 灵活配置 简单易用 兼容vue2vue3小程序、H5、app等多端

uniapp开发:瀑布流 灵活配置 简单易用 兼容vue2vue3小程序、H5、app等多端

2024-07-12 07:02| 来源: 网络整理| 查看: 265

概要支持的平台使用方式属性说明事件说明组件方法refresh的使用示例隐藏单项图片示例完整示例温馨提示关注我,不迷路 概要

custom-waterfalls-flow是一个瀑布流插件,灵活配置、简单易用、兼容多端、同时兼容vue2和vue3。

最近在做项目的时候需要用到瀑布流,于是在插件市场找了一些,下载量最高的是用了定位来做的,我认为瀑布流可以不用定位去实现,于是我就自己写了该插件。经过反复的测试优化,最终搞定!

设置列数: 瀑布流的列数可以通过参数直接控制,实时监听,随改随生效。列数最小为2,最大默认为5,可以通过maxColumn参数去控制最大列数,理论上可以设置无限大,具体值自己拿捏。

更新数据: 瀑布流的每项数据,可以直接通过修改value,随改随生效,这样可以实现加载更多数据。已经渲染过的数据不会再次渲染,每次只会渲染新增的数据,这样避免了数据越多渲染越慢的情况。可以调用组件的refresh()方法进行数据刷新,注意vue2和vue3中调用子组件的方法有区别,也会在下面进行说明。

展示方式: 瀑布流可以是纯图片,可以使用插槽自定义文字描述,微信小程序与app、h5使用会有些区别,也会在下面具体说明。内容高度及排序都不用担心,会根据每项的内容高度自动计算。

实现思路: 通过配置列数,先渲染出每列,再计算每列的高度,最小的那列就加入一条数据进行渲染,然后再重复计算每列,高度小的加入数据…其实思路是很简单的。

uniapp插件市场地址:https://ext.dcloud.net.cn/plugin?id=7594

支持的平台

H5、app、微信小程序(这三个平台经过反复测试优化,兼容vue2和vue3)。

百度小程序:由于插槽不能循环渲染的限制,只支持纯图片瀑布流。

其他小程序:暂未测试,需要的可以自己测试和修改,思路肯定是没错的,主要是兼容插槽的问题。

nvue:暂不支持,后期可能会支持,目前需要的可以自己修改源码。

使用方式

1、导入插件

该组件符合uni_modules规范,使用Hbuilderx导入插件,导入到项目根目录中的uni_modules文件夹中。

2、template中使用

uni_modules规范在项目页面中直接使用,不需要单独引入注册组件。

纯图片瀑布流使用

微信小程序自定义内容使用

微信小程序没有动态模板,使用for循环的方式进行渲染。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3