微信小程序之卡片瀑布流

最近想在小程序中通过第三方BrickLayout晓瀑布流插件实现留言卡片的瀑布流效果（如图1，图2所示），个人感觉这个还可以，可以自定义卡片颜色；头像；昵称等等信息，如果可以接入API接口更好，下面介绍实现卡片瀑布流步骤，如果有问题评论区留言或参考BrickLayout 晓瀑布流github说明

图1

图2

1. 微信小程序后台添加BrickLayout 晓瀑布流插件

这里我使用知晓云官方提供的瀑布流插件，在微信小程序管理后台中，按 APPID（wx3c042630f3cdc175）或者按照名字 BrickLayout 晓瀑布流搜索到该插件，点击添加，即可在代码中使用知晓云的瀑布流插件（图3所示）。

图3

2. 在app.json中声明插件信息

在 app.json 中声明该插件的引入，version 表示目前该插件版本为 0.2.0，provider 为提供该功能插件的 AppID

"plugins": {
   
    "brickLayout": {
   
      "version": "0.2.0",
      "provider": "wx3c042630f3cdc175"
    }
  }

3. 配置引用瀑布流组件的小程序页面的 json文件

在需要引用瀑布流组件的小程序页面的 JSON 配置文件中，作如下配置：

{
   
  "usingComponents": {
   
    "brickLayout": "plugin://brickLayout/brickLayout"
  }
}

4. 在wxml中直接使用瀑布流组件

在需要应用瀑布流组件的 WXML 里面直接使用即可，需要在js中绑定一些数据，定义一些功能来实现简单的瀑布流，dataSet是定义卡片上用户头像；昵称；时间；内容等等信息，option是配置瀑布流效果：字体颜色；背景；卡片栏数目等等,代码如下:

<brickLayout
  dataSet="{
    {dataSet}}"
  option="{
    {brick_option}}"
  bind:tapCard="tapCard"
  bind:tapLike="tapLike"
  bind:tapUser="tapUser"
  bind:onCardExpanded="onCardExpanded"
/>

5. 在card.js中初始化简单卡片信息

js中主要是声明了dataSet卡片信息数组和 brick_option瀑布流配置，代码如下:

Page({
   

  /**
   * 页面的初始数据
   */
  data: {
   
    dataSet:[
      {
   
        id: '1',
        content:
          '若重要，总会想办法；不重要，总会找理由。         ',
        backgroundColor: '#08ffc8',
        time: 1625211453,
        likedCount: 0,
        liked: false,
        user: {
   
          avatar: 'https://cdn.ifanr.cn/ifanr/default_avatar.png',
          username: '米勒',
          userId: '1'
        },
        images: [
          'https://scpic2.chinaz.net/Files/pic/pic9/202102/apic30680_s.jpg',
          'https://images.ifanr.cn/wp-content/uploads/2018/08/640-90-1024x576.jpeg'
         ]
      },
      {
   
        id: '2',
        content:
          '最好的学习是对过去的反思，最好的教训是你曾经历过的失败。',
        backgroundColor: '#B7E3E4',
        time: 1625211433,
        likedCount: 0,
        liked: false,
        user: {
   
          avatar: 'https://img2.baidu.com/it/u=3107083461,4268460867&fm=26&fmt=auto&gp=0.jpg',
          username: '王胜',
          userId: '1'
        },
        images: [
          'https://img2.baidu.com/it/u=2537153149,2154125075&fm=26&fmt=auto&gp=0.jpg',
          'https://images.ifanr.cn/wp-content/uploads/2018/08/640-90-1024x576.jpeg'
         ]