最近想在小程序中通过第三方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'
]