DCLOUD插件市场发布第一个uniapp插件|实现朋友圈图片动态排列
在写项目的过程中需要实现类似与微信朋友圈的图片排列的功能。 自己简单写了出来，在同桌lxx的鼓励下把它封装成了一个插件发布到了DCLOUD插件市场。
虽然功能很简单，但是很实用哦~ 点这里看成品
下面列出使用教程
实现朋友圈图片自适应排列
说明
本组件通常用于需要处理朋友圈或者类似qq空间说说的图片自动排列布局
用法示例
<template> <view> <imageAdaptation :imgList="imgList" :imgLayout1="imgLayout1" :imgLayout2="imgLayout2" :imgLayout3="imgLayout4"></imageAdaptation> </view> </template> 复制代码
import imageAdaptation from '../../marchVoiceComponents/marchCircle/imageAdaptation.vue' export default { components: { imageAdaptation }, data() { return { imgList: [ '../../static/img/cat.jpg','../../static/img/cat.jpg', '../../static/img/cat.jpg','../../static/img/cat.jpg', '../../static/img/cat.jpg','../../static/img/cat.jpg', '../../static/img/cat.jpg','../../static/img/cat.jpg', '../../static/img/cat.jpg' ], imgLayout1:[300,702], imgLayout2:[321,280], imgLayout3:[220,220], } } } 复制代码组件参数
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| imgList | Arrary | null | 需要展示的图片路径列表 |
| imgLayout1 | Arrary | null | 当图片只有一张（imgList.length==1)时，一排一列的布局 |
| imgLayout2 | Arrary | null | 当图片有两张或四张（imgList.length==4||imgList.length==2)，每行两列时的布局 |
| imgLayout3 | Arrary | null | 当图片有三张或五张（imgList.length==3||imgList.length==5)，每行三列时的布局 |
imgLayout1参数说明
注意：imgLayout2，imgLayout3参数性质与imgLayout1相同
| 类型 | 说明 | 参数1 | 参数2 |
|---|---|---|---|
| Number | 只能向属性中定义两个参数，用来表示图片宽高，单位rpx | 表示对应布局时图片宽度 | 表示对应布局时图片高度 |
详细插件可以访问插件地址 欢迎大家多多支持，有什么问题联系我，进行迭代修复~
作者：仙儿仙儿
链接：https://juejin.cn/post/7020250610167463973