基于 uniapp 开发的微信小程序失物招领项目源码+数据库（高分项目）.zip

- <a href="#c1" title="概要">概要</a> - <a href="#c2" title="支持的平台">支持的平台</a> - <a href="#c3" title="使用方式">使用方式</a> - <a href="#c4" title="属性说明">属性说明</a> - <a href="#c5" title="事件说明">事件说明</a> - <a href="#c6" title="组件方法">组件方法</a> - <a href="#c7" title="refresh的使用示例">refresh的使用示例</a> - <a href="#c8" title="隐藏单项图片示例">隐藏单项图片示例</a> - <a href="#c9" title="完整示例">完整示例</a> - <a href="#c10" title="温馨提示">温馨提示</a> - <a href="#c11" title="关注我，不迷路">关注我，不迷路</a> - <a href="#c12" title="个人作品展示">个人作品展示</a> <div id="c1"></div> #### 概要 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) <div id="c2"></div> #### 支持的平台 H5、app、微信小程序（这三个平台经过反复测试优化，兼容vue2和vue3）。 百度小程序：由于插槽不能循环渲染的限制，只支持纯图片瀑布流。 其他小程序：暂未测试，需要的可以自己测试和修改，思路肯定是没错的，主要是兼容插槽的问题。 nvue：暂不支持，后期可能会支持，目前需要的可以自己修改源码。 <div id="c3"></div> #### 使用方式 **1、导入插件** 该组件符合uni_modules规范，使用Hbuilderx导入插件，导入到项目根目录中的uni_modules文件夹中。 **2、template中使用** uni_modules规范在项目页面中直接使用，不需要单独引入注册组件。 ***纯图片瀑布流使用*** ``` <template> <custom-waterfalls-flow :value="data.list"></custom-waterfalls-flow> </template> ``` ***微信小程序自定义内容使用*** 微信小程序没有动态模板，使用for循环的方式进行渲染。 ``` <template> <custom-waterfalls-flow :value="data.list"> <view class="item" v-for="(item,index) in data.list" :key="index" slot="slot{{index}}"> <view class="title">{{item.title}}</view> <view class="desc">{{item.desc}}</view> </view> </custom-waterfalls-flow> </template> ``` ***h5、app端自定义内容使用*** 使用作用域插槽实现 ``` <template> <custom-waterfalls-flow :value="data.list"> <template v-slot:default="item"> <view class="item"> <view class="title">{{item.title}}</view> <view class="desc">{{item.desc}}</view> </view> </template> </custom-waterfalls-flow> </template> ``` ***小程序、h5、app等多端自定义内容使用*** 条件渲染-多端同时兼容 ``` <template> <custom-waterfalls-flow :value="data.list"> <!-- #ifdef MP-WEIXIN --> <view class="item" v-for="(item,index) in data.list" :key="index" slot="slot{{index}}"> <view class="title">{{item.title}}</view> <view class="desc">{{item.desc}}</view> </view> <!-- #endif --> <!-- #ifndef MP-WEIXIN --> <template v-slot:default="item"> <view class="item"> <view class="title">{{item.title}}</view> <view class="desc">{{item.desc}}</view> </view> </template> <!-- #endif --> </custom-waterfalls-flow> </template> ``` <div id="c4"></div> #### 属性说明 参数|说明|类型|是否必填|可选值|默认值 -|-|-|-|-|-| 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'}```|- <div id="c5"></div> #### 事件说明 事件名称|说明|回调参数 -|-|-| @loaded|图片加载完成事件|- @wapperClick|单项点击事件|单项对应参数 @imageClick|图片点击事件|单项对应参数 <div id="c6"></div> #### 组件方法 事件名称|说明|参数|使用场景 -|-|-|- refresh|刷新数据，数据初始化，vue2中使用：```this.$refs.waterfallsFlowRef.refresh();```；vue3中使用：```const waterfallsFlowRef = ref(null);waterfallsFlowRef.value.refresh();```|-|下拉刷新等 <div id="c7"></div> #### refresh的使用示例 ***vue2中使用*** ``` <template> <view> <button class="btn" type="default" @click="reset()">刷新数据</button> <custom-waterfalls-flow ref="waterfallsFlowRef" :value="data.list"></custom-waterfalls-flow> </view> </template> <script> export default { data() { return { data:{ list: [ { image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }, { image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' } ] } } }, reset(){ this.data.list = [{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }] this.$refs.waterfallsFlowRef.refresh(); } } </script> ``` ***vue3中使用*** ``` <template> <view> <button class="btn" type="default" @click="reset()">刷新数据</button> <custom-waterfalls-flow ref="waterfallsFlowRef" :value="data.list"></custom-waterfalls-flow> </view> </template> <script setup> import { reactive, ref } from 'vue'; const data = reactive({ list: [ { image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }, { image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' } ] }); const waterfallsFlowRef = ref(null); function reset(){ data.list = [{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }] waterfallsFlowRef.value.refresh(); } </script> ``` <div id="c8"></div> #### 隐藏单项图片示例 在数据列表中配置```hide:true```或者```hide:1```，就可以达到不显示图片的效果。支持使用参数hideImageKey自定义键名称，那就使用：```定义的键名称:true```或者```定义的键名称:1```。 ``` <template> <custom-waterfalls-flow :value="data.l