- <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
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
基于SpringBoot3开发的Ai平台 含双端 网页以及小程序 包含各类Ai模型 和绘图 ,含支付 双端数据同步 支持自定义预设词,功能板块定义 web兼容手机展示 【探索人工智能的宝藏之地】 无论您是计算机相关专业的在校学生、老师,还是企业界的探索者,这个项目都是为您量身打造的。无论您是初入此领域的小白,还是寻求更高层次进阶的资深人士,这里都有您需要的宝藏。不仅如此,它还可以作为毕设项目、课程设计、作业、甚至项目初期的立项演示。 【人工智能的深度探索】 人工智能——模拟人类智能的技术和理论,使其在计算机上展现出类似人类的思考、判断、决策、学习和交流能力。这不仅是一门技术,更是一种前沿的科学探索。 【实战项目与源码分享】 我们深入探讨了深度学习的基本原理、神经网络的应用、自然语言处理、语言模型、文本分类、信息检索等领域。更有深度学习、机器学习、自然语言处理和计算机视觉的实战项目源码,助您从理论走向实践,如果您已有一定基础,您可以基于这些源码进行修改和扩展,实现更多功能。 【期待与您同行】 我们真诚地邀请您下载并使用这些资源,与我们一起在人工智能的海洋中航行。同时,我们也期待与您的沟通交流,共同学习,共同进步。让我们在这个充满挑战和机遇的领域中共同探索未来!
资源推荐
资源详情
资源评论
收起资源包目录
人工智能项目资料-基于SpringBoot3开发的Ai平台 含双端 网页以及小程序 包含各类Ai模型 和绘图 .zip (980个子文件)
my.cnf 2KB
redis.conf 84KB
super_web.conf 928B
prism.css 3KB
index.css 1KB
hairline.css 827B
ellipsis.css 297B
clearfix.css 56B
ellipsis.css 0B
clearfix.css 0B
hairline.css 0B
var.css 0B
.env.development 300B
docker-compose 57.67MB
Dockerfile 718B
Dockerfile 706B
.gitignore 231B
.gitignore 62B
emailCode.html 3KB
index.html 764B
index.html 672B
favicon.ico 9KB
PayServiceImpl.java 16KB
DrawingServiceImpl.java 15KB
GptServiceImpl.java 11KB
AdminController.java 9KB
ServerServiceImpl.java 9KB
MiniGptWss.java 8KB
AuthServiceImpl.java 8KB
RedisUtils.java 7KB
DrawingTaskListener.java 7KB
UserServiceImpl.java 7KB
WebGptWss.java 6KB
UserController.java 6KB
WeChatUtils.java 6KB
DrawingController.java 5KB
ConversationWebsocket.java 5KB
AuthController.java 5KB
RedisConfig.java 5KB
ChatUtils.java 5KB
NewBingWss.java 5KB
AliUploadUtils.java 4KB
InspiritServiceImpl.java 4KB
PersonalityGptWss.java 4KB
ClaudeWss.java 4KB
ChatInstance.java 4KB
StarServiceImpl.java 3KB
Result.java 3KB
BaiduTranslationUtil.java 3KB
RewardTaskTimer.java 2KB
DrawingService.java 2KB
ChatGptCommon.java 2KB
InspiritController.java 2KB
RoutePathFilter.java 2KB
PayController.java 2KB
QRCodeGenerator.java 2KB
ControlCommon.java 2KB
ExceptionMessages.java 2KB
GlobalInterceptor.java 2KB
ServerService.java 2KB
PayService.java 2KB
DefaultClientUtil.java 2KB
ServerConfigDto.java 2KB
InitConfig.java 2KB
UserInspiritCommon.java 2KB
PublicController.java 2KB
WeChatTokenUtil.java 2KB
QueueRunner.java 2KB
DrawingSdTaskDto.java 2KB
StableDiffusionCommon.java 2KB
RedisLockHelper.java 2KB
BingUtils.java 2KB
GptService.java 2KB
WxSubscribeTemplate.java 1KB
ClaudeCommon.java 1KB
RedissonConfig.java 1KB
Chat.java 1KB
ImageUtils.java 1KB
DrawingSdImage2TaskDto.java 1KB
ArgumentModel.java 1KB
NetUtils.java 1KB
BeanUtils.java 1KB
UserService.java 1KB
JsonDataConfig.java 1KB
AuthService.java 1KB
WxSubscribe.java 1KB
LocalDateTimeConfig.java 1KB
NewBingCommon.java 1KB
StarService.java 1KB
User.java 1KB
TerminalConfigDto.java 1KB
PersonalityDto.java 1KB
NewBingClient.java 957B
UserLastOperationTimeAspect.java 954B
UserUtils.java 947B
AuthInterfaceFilter.java 930B
ControlDefaultConfig.java 907B
MybatisPlusConfig.java 866B
SpringContextUtil.java 863B
ServerConstant.java 857B
共 980 条
- 1
- 2
- 3
- 4
- 5
- 6
- 10
资源评论
妄北y
- 粉丝: 1w+
- 资源: 1万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功