/me-waterfall

微信小程序瀑布流组件库

Primary LanguageJavaScriptMIT LicenseMIT

介绍

me-waterfall 是一个微信小程序瀑布流组件库,实现简单,侵入性小,贴近 web 端的效果。

线上体验

扫描下方的小程序二维码,体验使用效果:

小程序

example

example下是使用示例demo,直接复制到小程序项目中添加页面路径可查看示例demo效果

安装

方式一:使用 npm 安装(推荐)

npm install me-waterfall

方式二:下载源码

将源码下载到本地,然后将 lib 目录拷贝到自己的项目中。

使用方法

在页面的 json 文件或 app.json 中引入组件:

{
  "usingComponents": {
    "me-waterfall": "/path/to/me-waterfall/waterfall/index",
    "me-waterfall-item": "/path/to/me-waterfall/waterfall-item/index"
  }
}

然后就可以在 wxml 中直接使用了:

<me-waterfall>
    <me-waterfall-item wx:for="{{list}}" wx:key="{{index}}">
        <image src="{{item.src}}" style="height:{{item.height}}px;width:100%"/>
    </me-waterfall-item>
</me-waterfall>

API

waterfall 组件

props

参数 说明 类型 默认值 是否必须
width 容器宽度,传入后将优先使用此值,呈现速度更快 Number -
column 列数 Number 2
gap 列与列之间的间距 Number 15

methods

reflow

重新排列元素,在某些情形下,你可能希望在完成某些操作后对瀑布流进行重新排列,此时可以调用此方法:

const waterfallInstance = this.selectComponent("#waterfall");

waterfallInstance.reflow();

外部样式类

参数 说明 类型 默认值 是否必须
custom-class 外部样式类 String -

waterfall-item 组件

外部样式类

参数 说明 类型 默认值 是否必须
custom-class 外部样式类 String -

关于性能

首先,够用;

其次,由于微信小程序中获取元素尺寸的 api 为回调形式,因此排列内部元素时需要延迟,即等到容器宽度取到之后再进行排列,这会使得瀑布流呈现速度减慢;如果改为传入 width,呈现速度会更快。

捐赠

如果这个库有帮助,请 Star 这个仓库,让更多人发现它。

当然,也可以鼓励我一下:

赞赏

开源协议

本项目基于 MIT 协议。