跳至主要內容
瀑布流组件

瀑布流组件

效果

网格布局左右两列

计算属性+插槽显示数据


起凡大约 1 分钟起凡商城小程序瀑布流
小程序商品瀑布流

小程序商品瀑布流

瀑布流

导入数据

导入完数据之后需要把创建人和编辑人的id修改为你系统中的用户id。

INSERT INTO mall.product (id, created_time, edited_time, creator_id, editor_id, name, price, cover, brand, category_id, stock, description, tags, specifications, attributes) VALUES ('04999440-6a62-46ae-8ec3-a25b374fc821', '2024-01-19 14:31:27.312976', '2024-01-20 14:49:48.728173', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', '华为Mate 60 Pro', 7999.00, 'https://img12.360buyimg.com/n1/s450x450_jfs/t1/235988/15/12433/48078/65a8f4faF38ef4d31/fc8ca7c491173fe4.jpg', '华为', 'a4518fb9-6879-44a5-8ad2-783867ba46d7', 1, '4060', '["性能很好","颜值高"]', '[{"name":"充电功率","values":["80-119W"]},{"name":"质保期","values":["3年"]}]', '[{"name":"颜色","values":["雅川青","雅丹黑"]},{"name":"版本","values":["12gb+256gb","12gb+512gb"]}]');
INSERT INTO mall.product (id, created_time, edited_time, creator_id, editor_id, name, price, cover, brand, category_id, stock, description, tags, specifications, attributes) VALUES ('04999440-6a62-46ae-8ec3-a25b374fc829', '2024-01-19 14:31:27.312976', '2024-01-20 14:49:48.728173', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', '华为Mate 60 Pro', 7999.00, 'https://img12.360buyimg.com/n1/s450x450_jfs/t1/235988/15/12433/48078/65a8f4faF38ef4d31/fc8ca7c491173fe4.jpg', '华为', 'a4518fb9-6879-44a5-8ad2-783867ba46d7', 1, '4060', '["性能很好","颜值高"]', '[{"name":"充电功率","values":["80-119W"]},{"name":"质保期","values":["3年"]}]', '[{"name":"颜色","values":["雅川青","雅丹黑"]},{"name":"版本","values":["12gb+256gb","12gb+512gb"]}]');
INSERT INTO mall.product (id, created_time, edited_time, creator_id, editor_id, name, price, cover, brand, category_id, stock, description, tags, specifications, attributes) VALUES ('fcd61ee7-ff1f-447c-1131-05c6dfea64b0', '2024-01-19 14:31:27.312976', '2024-01-20 14:49:48.728173', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', '华为Mate 60 Pro', 7999.00, 'https://img12.360buyimg.com/n1/s450x450_jfs/t1/235988/15/12433/48078/65a8f4faF38ef4d31/fc8ca7c491173fe4.jpg', '华为', 'a4518fb9-6879-44a5-8ad2-783867ba46d7', 1, '4060', '["性能很好","颜值高"]', '[{"name":"充电功率","values":["80-119W"]},{"name":"质保期","values":["3年"]}]', '[{"name":"颜色","values":["雅川青","雅丹黑"]},{"name":"版本","values":["12gb+256gb","12gb+512gb"]}]');
INSERT INTO mall.product (id, created_time, edited_time, creator_id, editor_id, name, price, cover, brand, category_id, stock, description, tags, specifications, attributes) VALUES ('fcd61ee7-ff1f-447c-1131-05c6dfea64b7', '2024-01-22 16:25:52.694286', '2024-01-20 14:49:48.728173', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', '华为Mate 60 Pro', 7999.00, 'https://img12.360buyimg.com/n1/s450x450_jfs/t1/235988/15/12433/48078/65a8f4faF38ef4d31/fc8ca7c491173fe4.jpg', '华为', 'a4518fb9-6879-44a5-8ad2-783867ba46d7', 1, '4060', '["性能很好","颜值高"]', '[{"name":"充电功率","values":["80-119W"]},{"name":"质保期","values":["3年"]}]', '[{"name":"颜色","values":["雅川青","雅丹黑"]},{"name":"版本","values":["12gb+256gb","12gb+512gb"]}]');
INSERT INTO mall.product (id, created_time, edited_time, creator_id, editor_id, name, price, cover, brand, category_id, stock, description, tags, specifications, attributes) VALUES ('fcd61ee7-ff1f-448c-1131-05c6dfea64b7', '2024-01-19 14:31:27.312976', '2024-01-22 16:25:52.694286', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', '华为MateBook D 14 2024笔记本电脑 13代英特尔酷睿处理器/16:10护眼全面屏 i5 16G 512G 皓月银', 4199.00, 'https://img10.360buyimg.com/n1/jfs/t1/148460/39/40865/58528/65ad1436F567c3e26/9f121abdd7913e20.jpg', '华为(HUAWEI)', '9eba1038-5f7d-4440-a1b2-c9bd91ea15b4', 7, '华为MateBook D 14 2024笔记本电脑 13代英特尔酷睿处理器/16:10护眼全面屏 i5 16G 512G 皓月银', '["性能很好","颜值高"]', '[{"name":"屏幕比例","values":["16:10"]},{"name":"能效等级","values":["一级能效"]},{"name":"屏幕色域","values":["100%sRGB"]}]', '[{"name":"颜色","values":["皓月银","深空灰"]},{"name":"型号","values":["I5+16GB+512GB","I7+16GB+1T"]}]');
INSERT INTO mall.product (id, created_time, edited_time, creator_id, editor_id, name, price, cover, brand, category_id, stock, description, tags, specifications, attributes) VALUES ('fcd61ee7-ff1f-448c-1131-05c6dfec64b7', '2024-01-22 16:25:52.694286', '2024-01-22 16:25:52.694286', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', '华为MateBook D 14 2024笔记本电脑 13代英特尔酷睿处理器/16:10护眼全面屏 i5 16G 512G 皓月银', 4199.00, 'https://img10.360buyimg.com/n1/jfs/t1/148460/39/40865/58528/65ad1436F567c3e26/9f121abdd7913e20.jpg', '华为(HUAWEI)', '9eba1038-5f7d-4440-a1b2-c9bd91ea15b4', 7, '华为MateBook D 14 2024笔记本电脑 13代英特尔酷睿处理器/16:10护眼全面屏 i5 16G 512G 皓月银', '["性能很好","颜值高"]', '[{"name":"屏幕比例","values":["16:10"]},{"name":"能效等级","values":["一级能效"]},{"name":"屏幕色域","values":["100%sRGB"]}]', '[{"name":"颜色","values":["皓月银","深空灰"]},{"name":"型号","values":["I5+16GB+512GB","I7+16GB+1T"]}]');
INSERT INTO mall.product (id, created_time, edited_time, creator_id, editor_id, name, price, cover, brand, category_id, stock, description, tags, specifications, attributes) VALUES ('fcd61ee7-ff1f-448c-8131-05c6dfea14b8', '2024-01-22 16:25:52.694286', '2024-01-22 16:25:52.694286', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', '索尼(SONY)PS5 PlayStation5(轻薄版 1TB)数字版 国行PS5游戏机', 2999.00, 'https://img12.360buyimg.com/n7/jfs/t1/249378/1/3423/71589/65a788faF19f96be1/128abdbb059b0bd9.jpg', '索尼(SONY)', '9eba1038-5f7d-4440-a1b2-c9bd91ea15b4', 7, '华为MateBook D 14 2024笔记本电脑 13代英特尔酷睿处理器/16:10护眼全面屏 i5 16G 512G 皓月银', '["性能很好","颜值高"]', '[{"name":"屏幕比例","values":["16:10"]},{"name":"能效等级","values":["一级能效"]},{"name":"屏幕色域","values":["100%sRGB"]}]', '[{"name":"颜色","values":["皓月银","深空灰"]},{"name":"型号","values":["I5+16GB+512GB","I7+16GB+1T"]}]');
INSERT INTO mall.product (id, created_time, edited_time, creator_id, editor_id, name, price, cover, brand, category_id, stock, description, tags, specifications, attributes) VALUES ('fcd61ee7-ff1f-448c-8131-05c6dfea64b7', '2024-01-22 16:25:52.694286', '2024-01-22 16:25:52.694286', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', '狼蛛(AULA) F99客制化机械键盘gasket结构全键热插拔有线蓝牙无线三模办公电竞游戏 星落凝云-收割者轴
', 259.00, 'https://img13.360buyimg.com/n7/jfs/t1/249540/23/1636/148199/6593c2c1F5b7c6041/7c04e37a0da39862.jpg', '狼蛛(AULA)', '9eba1038-5f7d-4440-a1b2-c9bd91ea15b4', 7, '华为MateBook D 14 2024笔记本电脑 13代英特尔酷睿处理器/16:10护眼全面屏 i5 16G 512G 皓月银', '["性能很好","颜值高"]', '[{"name":"屏幕比例","values":["16:10"]},{"name":"能效等级","values":["一级能效"]},{"name":"屏幕色域","values":["100%sRGB"]}]', '[{"name":"颜色","values":["皓月银","深空灰"]},{"name":"型号","values":["I5+16GB+512GB","I7+16GB+1T"]}]');
INSERT INTO mall.product (id, created_time, edited_time, creator_id, editor_id, name, price, cover, brand, category_id, stock, description, tags, specifications, attributes) VALUES ('fcd61ee7-ff1f-448c-8131-05c6dfea64b8', '2024-01-22 16:25:52.694286', '2024-01-22 16:25:52.694286', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', '华为MateBook D 14 2024笔记本电脑 13代英特尔酷睿处理器/16:10护眼全面屏 i5 16G 512G 皓月银', 4199.00, 'https://img10.360buyimg.com/n1/jfs/t1/148460/39/40865/58528/65ad1436F567c3e26/9f121abdd7913e20.jpg', '华为(HUAWEI)', '9eba1038-5f7d-4440-a1b2-c9bd91ea15b4', 7, '华为MateBook D 14 2024笔记本电脑 13代英特尔酷睿处理器/16:10护眼全面屏 i5 16G 512G 皓月银', '["性能很好","颜值高"]', '[{"name":"屏幕比例","values":["16:10"]},{"name":"能效等级","values":["一级能效"]},{"name":"屏幕色域","values":["100%sRGB"]}]', '[{"name":"颜色","values":["皓月银","深空灰"]},{"name":"型号","values":["I5+16GB+512GB","I7+16GB+1T"]}]');
INSERT INTO mall.product (id, created_time, edited_time, creator_id, editor_id, name, price, cover, brand, category_id, stock, description, tags, specifications, attributes) VALUES ('fcd61ee7-ff1f-448c-8131-05c6dfea64bc', '2024-01-22 16:25:52.694286', '2024-01-22 16:25:52.694286', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', '狼蛛(AULA) F99客制化机械键盘gasket结构全键热插拔有线蓝牙无线三模办公电竞游戏 星落凝云-收割者轴
', 259.00, 'https://img13.360buyimg.com/n7/jfs/t1/249540/23/1636/148199/6593c2c1F5b7c6041/7c04e37a0da39862.jpg', '狼蛛(AULA)', '9eba1038-5f7d-4440-a1b2-c9bd91ea15b4', 7, '华为MateBook D 14 2024笔记本电脑 13代英特尔酷睿处理器/16:10护眼全面屏 i5 16G 512G 皓月银', '["性能很好","颜值高"]', '[{"name":"屏幕比例","values":["16:10"]},{"name":"能效等级","values":["一级能效"]},{"name":"屏幕色域","values":["100%sRGB"]}]', '[{"name":"颜色","values":["皓月银","深空灰"]},{"name":"型号","values":["I5+16GB+512GB","I7+16GB+1T"]}]');
INSERT INTO mall.product (id, created_time, edited_time, creator_id, editor_id, name, price, cover, brand, category_id, stock, description, tags, specifications, attributes) VALUES ('fcd61ee7-ff1f-448c-8131-05c6dfea64bz', '2024-01-19 14:31:27.312976', '2024-01-20 14:49:48.728173', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', '华为Mate 60 Pro', 7999.00, 'https://img12.360buyimg.com/n1/s450x450_jfs/t1/235988/15/12433/48078/65a8f4faF38ef4d31/fc8ca7c491173fe4.jpg', '华为', 'a4518fb9-6879-44a5-8ad2-783867ba46d7', 1, '4060', '["性能很好","颜值高"]', '[{"name":"充电功率","values":["80-119W"]},{"name":"质保期","values":["3年"]}]', '[{"name":"颜色","values":["雅川青","雅丹黑"]},{"name":"版本","values":["12gb+256gb","12gb+512gb"]}]');
INSERT INTO mall.product_category (id, created_time, edited_time, creator_id, editor_id, name, parent_id, image, description, sort_order) VALUES ('51eac0d9-a653-4edb-b156-5a7d96648196', '2024-01-18 14:40:58.923272', '2024-01-18 14:40:58.923272', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', '显卡', '9eba1038-5f7d-4440-a1b2-c9bd91ea15b4', '', '显卡', 1);
INSERT INTO mall.product_category (id, created_time, edited_time, creator_id, editor_id, name, parent_id, image, description, sort_order) VALUES ('9eba1038-5f7d-4440-a1b2-c9bd91ea15b4', '2024-01-18 14:39:20.619126', '2024-01-18 14:39:20.619126', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', '电脑', null, '', '电脑', 0);
INSERT INTO mall.product_category (id, created_time, edited_time, creator_id, editor_id, name, parent_id, image, description, sort_order) VALUES ('a4518fb9-6879-44a5-8ad2-783867ba46d7', '2024-01-18 14:40:06.789083', '2024-01-18 14:40:06.789083', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', '内存条', '9eba1038-5f7d-4440-a1b2-c9bd91ea15b4', '', '内存条', 1);


起凡大约 7 分钟起凡商城商品管理瀑布流小程序