微信小程序之卡片瀑布流
最近想在小程序中通过第三方BrickLayout晓瀑布流插件实现留言卡片的瀑布流效果（如图1，图2所示），个人感觉这个还可以，可以自定义卡片颜色；头像；昵称等等信息，如果可以接入API接口更好，下面介绍实现卡片瀑布流步骤，如果有问题评论区留言或参考BrickLayout 晓瀑布流github说明
1. 微信小程序后台添加BrickLayout 晓瀑布流插件
这里我使用知晓云官方提供的瀑布流插件，在微信小程序管理后台中，按 APPID（wx3c042630f3cdc175）或者按照名字 BrickLayout 晓瀑布流搜索到该插件，点击添加，即可在代码中使用知晓云的瀑布流插件（图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'
]
},
{
id: '3',
content:
'高度不够，看到的都是问题；格局太小，纠结的都是鸡毛蒜皮。',
backgroundColor: '#ffb6b9',
time: 1625711229,
likedCount: 0,
liked: false,
user: {
avatar: 'https://img0.baidu.com/it/u=1523773682,3211558535&fm=26&fmt=auto&gp=0.jpg',
username: '塔雷',
userId: '1'
},
images: [
'https://img2.woyaogexing.com/2020/01/13/2923f43769214f69b83e01737c035538!1242x9999.jpeg',
'https://images.ifanr.cn/wp-content/uploads/2018/08/640-90-1024x576.jpeg'
]
},
{
id: '4',
content:
'长大后才知道，“尽量不给别人添麻烦，别人最好也别麻烦我。”这句话不是冷漠，而是成熟。',
backgroundColor: '#fae3d9',
time: 1625611229,
likedCount: 0,
liked: false,
user: {
avatar: 'https://img1.baidu.com/it/u=3869515018,2735128030&fm=26&fmt=auto&gp=0.jpg',
username: '清影觅',
userId: '1'
},
images: [
'https://img2.baidu.com/it/u=2443313395,2083782056&fm=26&fmt=auto&gp=0.jpg',
'https://images.ifanr.cn/wp-content/uploads/2018/08/640-90-1024x576.jpeg'
]
},
{
id: '5',
content:
'“心眼”这东西：如果你想多了，就是小心眼；想少了，就是缺心眼；一直想呢，就是死心眼；不想呢，那就是没心眼了。',
backgroundColor: '#AF7AC5',
time: 1625211129,
likedCount: 0,
liked: false,
user: {
avatar: 'https://img1.baidu.com/it/u=1766311062,564872455&fm=26&fmt=auto&gp=0.jpg',
username: '女霸@',
userId: '1'
},
images: [
'https://img1.baidu.com/it/u=2095759051,3678625480&fm=26&fmt=auto&gp=0.jpg',
'https://images.ifanr.cn/wp-content/uploads/2018/08/640-90-1024x576.jpeg'
]
},
{
id: '6',
content:
'管好你的懒惰浮躁，管好你的感情用事，管好你的怯懦自卑，管好你闲言碎语的八卦心。能静下心来做你该做的事，比什么都重要。忙的时候虽然累成狗，但是忙完了的感觉真的特别爽！——苏芩',
backgroundColor: '#8ac6d1',
time: 1625211453,
likedCount: 3,
liked: false,
user: {
avatar: 'https://img1.baidu.com/it/u=2681504758,1624692466&fm=26&fmt=auto&gp=0.jpg',
username: 'ぐ懵懂少年恋go',
userId: '1'
},
images: [
'https://scpic1.chinaz.net/Files/pic/pic9/201707/zzpic5462_s_w285.jpg',
'https://images.ifanr.cn/wp-content/uploads/2018/08/640-90-1024x576.jpeg'
]
},
{
id: '7',
content:
'人们出于两点才改变：要不就是懂了很多，想改变；要不就是伤得太深，必须改变。',
backgroundColor: '#fff1ac',
time: 1625211553,
likedCount: 0,
liked: false,
user: {
avatar: 'https://img2.baidu.com/it/u=1077360284,2857506492&fm=26&fmt=auto&gp=0.jpg',
username: '幸福、已走远',
userId: '1'
},
images: [
'https://img0.baidu.com/it/u=3330400531,1178525001&fm=26&fmt=auto&gp=0.jpg',
'https://images.ifanr.cn/wp-content/uploads/2018/08/640-90-1024x576.jpeg'
]
},
{
id: '8',
content:
'小时候一直不理解，父母为什么可以那么早起床，长大后才明白，叫醒他们的不是闹钟，而是生活和责任！哪有什么岁月静好，只不过有人在替你负重前行。',
backgroundColor: '#f9bcdd',
time: 1625211453,
likedCount: 0,
liked: false,
user: {
avatar: 'https://img0.baidu.com/it/u=3849281771,1234052768&fm=26&fmt=auto&gp=0.jpg',
username: '接吻会减肥',
userId: '1'
},
images: [
'https://scpic.chinaz.net/Files/pic/pic9/202004/zzpic24736_s.jpg',
'https://images.ifanr.cn/wp-content/uploads/2018/08/640-90-1024x576.jpeg'
]
},
{
id: '9',
content:
'心如止水，乱则不明。很多事，你越是想去弄个清楚，反而越是困惑。心中一旦有了执念，就像线团，只会越扯越乱。子欲避之，反促遇之。凡事顺其自然就好。既来之，则安之。这才是生存之道。',
backgroundColor: '#614ad3',
time: 1625211453,
likedCount: 0,
liked: false,
user: {
avatar: 'https://img0.baidu.com/it/u=976875090,3326637112&fm=26&fmt=auto&gp=0.jpg',
username: '气不乖的海绵宝宝',
userId: '1'
},
images: [
'https://scpic2.chinaz.net/Files/pic/pic9/201407/apic5143_s.jpg',
'https://images.ifanr.cn/wp-content/uploads/2018/08/640-90-1024x576.jpeg'
]
},
{
id: '10',
content:
'年龄永远不是衡量一个人的刻度，只有责任的叠加才会让人逐渐成长。',
backgroundColor: '#001871',
time: 1625211453,
likedCount: 0,
liked: false,
user: {
avatar: 'https://img1.baidu.com/it/u=803878594,2730255294&fm=11&fmt=auto&gp=0.jpg',
username: '绅刃',
userId: '1'
},
images: [
'https://scpic2.chinaz.net/Files/pic/pic9/202104/apic32405_s.jpg',
'https://images.ifanr.cn/wp-content/uploads/2018/08/640-90-1024x576.jpeg'
]
},
{
id: '11',
content:
'有的人越来越清楚自己想成为的样子，却越来越不清楚自己现在的样子。',
backgroundColor: '#ff585d',
time: 1625211463,
likedCount: 0,
liked: false,
user: {
avatar: 'https://img0.baidu.com/it/u=3171043854,3327700684&fm=26&fmt=auto&gp=0.jpg',
username: '小上帝',
userId: '1'
},
images: [
'https://scpic2.chinaz.net/Files/pic/pic9/202103/apic31485_s.jpg',
'https://images.ifanr.cn/wp-content/uploads/2018/08/640-90-1024x576.jpeg'
]
},
{
id: '12',
content:
'有些事，过去了，后悔无益；有些人，离开了，惋惜无用。无缘的，终将离去；无情的，都会失去。',
backgroundColor: '#41b6e6',
time: 1625211473,
likedCount: 3,
liked: false,
user: {
avatar: 'https://img1.baidu.com/it/u=2838780513,3053016818&fm=26&fmt=auto&gp=0.jpg',
username: '流浪的猫咪',
userId: '1'
},
images: [
'https://scpic3.chinaz.net/Files/pic/pic9/202104/apic32084_s.jpg',
'https://images.ifanr.cn/wp-content/uploads/2018/08/640-90-1024x576.jpeg'
]
},{
id: '13',
content:
'忙的人，没心思议论别人；过得好的人，没心情在意别人的评价。',
backgroundColor: '#FF2E63',
time: 1625214229,
likedCount: 0,
liked: false,
user: {
avatar: 'https://img0.baidu.com/it/u=3744289328,2350073756&fm=26&fmt=auto&gp=0.jpg',
username: '正能量的女神@',
userId: '1'
},
images: [
'https://scpic2.chinaz.net/Files/pic/pic9/202005/apic25580_s_w285.jpg',
'https://images.ifanr.cn/wp-content/uploads/2018/08/640-90-1024x576.jpeg'
]
},
{
id: '14',
content:
'你怎么对待生活，生活就会怎么对待你。学会对自己负责，生活不能得过且过。',
backgroundColor: '#7A57D1',
time: 1625212229,
likedCount: 0,
liked: false,
user: {
avatar: 'https://img0.baidu.com/it/u=2013609626,3082626527&fm=26&fmt=auto&gp=0.jpg',
username: '为爱控',
userId: '1'
},
images: [
'https://scpic1.chinaz.net/Files/pic/pic9/201612/zzpic332_s_w285.jpg',
'https://images.ifanr.cn/wp-content/uploads/2018/08/640-90-1024x576.jpeg'
]
},
{
id: '15',
content:
'让人难堪的玩笑不要开，让人反感的事不要做，懂得适可而止才不讨人厌。',
backgroundColor: '#f6f6e9',
time: 1625211269,
likedCount: 3,
liked: false,
user: {
avatar: 'https://img1.baidu.com/it/u=2515883801,2268600549&fm=26&fmt=auto&gp=0.jpg',
username: '温存那份仅有的记亿丶',
userId: '1'
},
images: [
'https://img2.baidu.com/it/u=3202449959,3440156536&fm=26&fmt=auto&gp=0.jpg',
'https://images.ifanr.cn/wp-content/uploads/2018/08/640-90-1024x576.jpeg'
]
},{
id: '16',
content:
'真正的缘，不只是初次见面就有相见恨晚的感觉，而是历尽沧桑后发出“认识你真好”的心里话。',
backgroundColor: '#6abe83',
time: 1625211239,
likedCount: 0,
liked: false,
user: {
avatar: 'https://img2.baidu.com/it/u=1153370429,4098031930&fm=11&fmt=auto&gp=0.jpg',
username: '唯美似夏草丶 唯美似夏花丶',
userId: '1'
},
images: [
'https://img2.woyaogexing.com/2020/01/13/21e50278c02447ddbfbf6657f4bff5f6!1242x9999.jpeg',
'https://images.ifanr.cn/wp-content/uploads/2018/08/640-90-1024x576.jpeg'
]
},
{
id: '17',
content:
'我以为别人尊重我，是因为我很优秀。慢慢的我明白了，别人尊重我，是因为别人很优秀；优秀的人更懂得尊重别人。对人恭敬其实是在庄严你自己。',
backgroundColor: '#2b9464',
time: 1625211229,
likedCount: 0,
liked: false,
user: {
avatar: 'https://img0.baidu.com/it/u=3018968254,2801372361&fm=26&fmt=auto&gp=0.jpg',
username: '花巧可言-*',
userId: '1'
},
images: [
'https://img1.baidu.com/it/u=3357258967,1502566891&fm=26&fmt=auto&gp=0.jpg',
'https://images.ifanr.cn/wp-content/uploads/2018/08/640-90-1024x576.jpeg'
]
},
{
id: '18',
content:
'叶子的离开，不是风的追求，也不是树的挽留，而是命运的安排，自然的选择；该来的会来，该走的会走，有时候离开并不意味着结束，而是另一种开始',
backgroundColor: '#2BDE73',
time: 1625211226,
likedCount: 3,
liked: true,
user: {
avatar: 'https://img0.baidu.com/it/u=3311900507,1448170316&fm=26&fmt=auto&gp=0.jpg',
username: '海绵宝宝爱上派大星、',
userId: '1'
},
images: [
'https://img0.baidu.com/it/u=3392853817,4166535360&fm=26&fmt=auto&gp=0.jpg',
'https://images.ifanr.cn/wp-content/uploads/2018/08/640-90-1024x576.jpeg'
]
}
],
brick_option:{
defaultExpandStatus: true,
backgroundColor: '#ababab',
forceRepaint: false,
columns: 2,
imageFillMode: 'widthFix',
icon:{
fill:'',
default:''
},
fontColor:'#000'
}
}
})
6. 实现卡片瀑布流功能
到这里，运行小程序可以得到固定卡片信息的瀑布流，你可以在此基础上接入一些API获取用户的真实信息，实现卡片点击；点赞等事件使得更加完善，可以去参考知晓云瀑布流组件github上说明