本文介绍了如何在白码低代码平台上，利用Vue框架快速搭建一个包含搜索框、商品列表和底部导航栏的商城商品列表页面。通过上传设计图，复制样式代码，创建数据集并与组件进行数据对接，实现了静态页面的构建。
目标：
搭建商城的一个商品列表页面（先做静态页）
开发环境：
白码低代码开发平台的新自定义页功能（使用vue框架）
前期准备：
需要先准备商品数据表并已有一些商品数据，并创建一个商品列表的数据集
商品列表页面的设计图如下（设计图上传到蓝湖，可直接复制样式代码）
根据设计图，可以看出三大部分元素组成：
①顶部一个搜索框
②中间的商品列表，列表每一项包含图片、商品名称、销售价
③底部导航栏，包括首页、所有商品、购物车（数量）、我的icon
实现步骤：
新增一个页面，命名为商品列表；
编辑页面，切换到移动端
最低0.47元/天 解锁文章
扫一扫
4073
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
