更新记录

1.0.0(2022-09-29)

第一版小程序瀑布流,由上个插件更改而来,更改了说明,一些方法的名称。


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

water-fall

瀑布流插件,适用于没有照片的宽高比例信息时,按照照片宽高加载,因为是先获取照片信息再去排列,可能在照片过大的时候,加载缓慢

使用方法

1、页面引入并使用,传入两个参数,一个是照片信息,另一个是触发方法

<WaterFall :wfList="imgList" @postsTap="tap">

imgList的格式

[
    {
        avatarUrl: "https://img0.baidu.com/it/u=2447135182,2703616006&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=607",
        content: "这是一段内容",
        images: "https://img0.baidu.com/it/u=2447135182,2703616006&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=607",
        likeCount: 111,
        nickName: "小明",
        top: 1,
        liked: false
    }
]

tap接受的参数(item)

item 为你传入的图片对象信息,以及多了一个type值

switch (item.type) {
    case 'jump':
        // 点击了整个照片触发,例子:进入详情页。
        break;
    case 'del':
        // 点击了右下角,例子:执行点赞、删除操作,需要自己更改,默认为点赞,没有触发del。
        break;
    default:
        break;
}

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问