项目以Springboot集SpringSecurity、redis等多个中间件为载体，做出一个有app端、web端的酒店管理系

- 概要 - 支持的平台 - 使用方式 - 属性说明 - 事件说明 - 组件方法 - refresh的使用示例 - 隐藏单项图片示例 - 完整示例 - 温馨提示 - 关注我，不迷路 - 个人作品展示 #### 概要 custom-waterfalls-flow是一个瀑布流插件，灵活配置、简单易用、兼容多端、同时兼容vue2和vue3。 最近在做项目的时候需要用到瀑布流，于是在插件市场找了一些，下载量最高的是用了定位来做的，我认为瀑布流可以不用定位去实现，于是我就自己写了该插件。经过反复的测试优化，最终搞定！ **设置列数：** 瀑布流的列数可以通过参数直接控制，实时监听，随改随生效。列数最小为2，最大默认为5，可以通过maxColumn参数去控制最大列数，理论上可以设置无限大，具体值自己拿捏。 **更新数据：** 瀑布流的每项数据，可以直接通过修改value，随改随生效，这样可以实现加载更多数据。已经渲染过的数据不会再次渲染，每次只会渲染新增的数据，这样避免了数据越多渲染越慢的情况。可以调用组件的```refresh()```方法进行数据刷新，注意vue2和vue3中调用子组件的方法有区别，也会在下面进行说明。 **展示方式：** 瀑布流可以是纯图片，可以使用插槽自定义文字描述，微信小程序与app、h5使用会有些区别，也会在下面具体说明。内容高度及排序都不用担心，会根据每项的内容高度自动计算。 **实现思路：** 通过配置列数，先渲染出每列，再计算每列的高度，最小的那列就加入一条数据进行渲染，然后再重复计算每列，高度小的加入数据...其实思路是很简单的。 uniapp插件市场地址：[https://ext.dcloud.net.cn/plugin?id=7594](https://ext.dcloud.net.cn/plugin?id=7594) #### 支持的平台 H5、app、微信小程序（这三个平台经过反复测试优化，兼容vue2和vue3）。 百度小程序：由于插槽不能循环渲染的限制，只支持纯图片瀑布流。 其他小程序：暂未测试，需要的可以自己测试和修改，思路肯定是没错的，主要是兼容插槽的问题。 nvue：暂不支持，后期可能会支持，目前需要的可以自己修改源码。 #### 使用方式 **1、导入插件** 该组件符合uni_modules规范，使用Hbuilderx导入插件，导入到项目根目录中的uni_modules文件夹中。 **2、template中使用** uni_modules规范在项目页面中直接使用，不需要单独引入注册组件。 ***纯图片瀑布流使用*** ``` ``` ***微信小程序自定义内容使用*** 微信小程序没有动态模板，使用for循环的方式进行渲染。 ``` ``` ***h5、app端自定义内容使用*** 使用作用域插槽实现 ``` ``` ***小程序、h5、app等多端自定义内容使用*** 条件渲染-多端同时兼容 ``` ``` #### 属性说明 参数|说明|类型|是否必填|可选值|默认值 -|-|-|-|-|-| value|渲染的列表|Array|是|-|- column|列数|Number|否|2-maxColumn|2 maxColumn|最大列数|Number|否|>2|5 columnSpace|列之间的间距（单位是百分比）|Number|否|-|2 imageKey|列表中的图片字段的键名|String|否|-|image hideImageKey|隐藏图片字段的键名|String|否|-|hide seat|自定义文字的位置,1-图片上方，2-图片下方|Number|否|1/2|2 listStyle|单个展示项的样式|Object|否|示例：```{'background':'red'}```|- #### 事件说明 事件名称|说明|回调参数 -|-|-| @loaded|图片加载完成事件|- @wapperClick|单项点击事件|单项对应参数 @imageClick|图片点击事件|单项对应参数 #### 组件方法 事件名称|说明|参数|使用场景 -|-|-|- refresh|刷新数据，数据初始化，vue2中使用：```this.$refs.waterfallsFlowRef.refresh();```；vue3中使用：```const waterfallsFlowRef = ref(null);waterfallsFlowRef.value.refresh();```|-|下拉刷新等 #### refresh的使用示例 ***vue2中使用*** ``` ``` ***vue3中使用*** ``` ``` #### 隐藏单项图片示例 在数据列表中配置```hide:true```或者```hide:1```，就可以达到不显示图片的效果。支持使用参数hideImageKey自定义键名称，那就使用：```定义的键名称:true```或者```定义的键名称:1```。 ```