小程序瀑布流mp-waterfall

mp-waterfall

一个 小程序瀑布流组件

使用场景

瀑布流子元素中，有一张宽高不固定的图片和其他一些元素，后端同学又没有返回图片宽高的时候，可以尝试使用该组件 ^_^ 组件会自动判断元素高度，插入较短的列中

效果如图：小程序：MJ魔法AI绘图美图壁纸

如何使用

1. 下载项目，将瀑布流组件 dist/mp-waterfall 文件夹复制到自己的项目中
2. 自行新建瀑布流节点组件（可参考demo/components/waterfall-item），并在节点组件的properties中添加itemData（因为瀑布流组件会将 list 中的每一项以 itemData 传入子组件），例如：

<view class="w-item">
  <!-- 组件会将图片的高度注入到 itemData 中，字段为imgHeight, 所以图片高度请设置为{
  
  {itemData.imgHeight}}px -->
  <image
    src="{
  
  {itemData.imgUrl}}"
    style="width:100%;height:{
  
  {itemData.imgHeight}}px"
    class="w-image"
  />
</view>

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    itemData: {
      type: Object,
    },
  },
});

1. 在页面 json 中引入组件mp-waterfall和waterfall-item，可参考demo/pages/index/index.json

{
  "usingComponents": {
    "mp-waterfall": "../../components/mp-waterfall",
    "waterfall-item": "../../components/waterfall-item"
  }
}

1. 在页面 wxml 中添加瀑布流组件，参数说明请看 参数

<!-- generic:item 由于本组件使用了微信小程序抽象节点特性，需要你手动指定子组件，传入自行创建的瀑布流节点组件即可  -->
<mp-waterfall
  id="waterfall"
  generic:item="waterfall-item"
  list="{
  
  {list || []}}"
  idKey="id"
  imageKey="imgUrl"
></mp-waterfall>

1. 向list中添加数据，即可显示瀑布流内容，简单示例：

/**
 * 示例数据中的`id`、`imgUrl`并非强制要求，可根据实际情况使用自定义字段，只需要和传入组件的`idKey`,`imageKey`保持一致即可
 * 如：数据中的唯一标识的key为`content_id`,图片的key为`img`，传入中间的props为 <mp-waterfall idKey="content_id" imageKey="img" 其他参数... ></mp-waterfall>
 */
Page({
  data: {
    // 列表数据
    list: [
      {
        id: 1,
        imgUrl: 'https://iph.href.lu/300x200?fg=ffffff&bg=07c160'
      },
      {
        id: 2,
        imgUrl: 'https://iph.href.lu/300x300?fg=ffffff&bg=07c160'
      },
      {
        id: 3,
        imgUrl: 'https://iph.href.lu/300x400?fg=ffffff&bg=07c160'
      },
      {
        id: 4,
        imgUrl: 'https://iph.href.lu/300x500?fg=ffffff&bg=07c160'
      },
      {
        id: 5,
        imgUrl: 'https://iph.href.lu/300x600?fg=ffffff&bg=07c160'
      },
    ],
  },
})

1. 滑动加载，直接向list中追加数据即可