利用低代码快速搭建电商小程序之商品列表页

目标:

搭建商城的一个商品列表页面(先做静态页)

开发环境:

访问白码低代码平台:https://www.bnocode.com/

白码的新自定义页功能(使用vue框架)

前期准备:

需要先准备商品数据表并已有一些商品数据,并创建一个商品列表的数据集

商品列表页面的设计图如下(设计图上传到蓝湖,可直接复制样式代码)

快速搭建商品列表页面

根据设计图,可以看出三大部分元素组成:

①顶部一个搜索框

②中间的商品列表,列表每一项包含图片、商品名称、销售价

③底部导航栏,包括首页、所有商品、购物车(数量)、我的icon

实现步骤:

新增一个页面,命名为商品列表;

快速搭建商品列表页面

编辑页面,切换到移动端

快速搭建商品列表页面

打开图片库,将页面所需图片素材上传到图片库;

快速搭建商品列表页面

顶部搜索框:

1. 打开组件库,添加容器类型的块组件,这里的块组件将用于放置搜索框;

快速搭建商品列表页面

1.1组件高度和背景颜色等样式都可以从蓝湖设计图这里找到并复制;

快速搭建商品列表页面

2.添加输入类型的文本框组件

快速搭建商品列表页面

2.1在图层的“数据”设置默认值,把原有的“文本内容”清空,这里的默认值是文本框默认填写的内容;

快速搭建商品列表页面

然后将块组件绑定这个文本框组件,这样就可以将文本框“放”进了块组件内;

快速搭建商品列表页面

2.2这时打开蓝湖的设计图,找到搜索框的图层,复制样式代码;

快速搭建商品列表页面

2.3回到白码这边,点击css,点击粘贴样式,将从蓝湖复制的样式代码粘贴过来并确定,就可以直接变成对应的样式了;

快速搭建商品列表页面

继续调整文本框的位置,为了在输入框左边加上“放大镜”的icon,以及占位文本“搜索....”可以通过组件的编程添加两个属性实现;

快速搭建商品列表页面

3.接下来开始做搜索框下的4个排序按钮,同理,先添加一个块组件,用于放置这4种排序的文本;

快速搭建商品列表页面

添加4个文本组件,并用排序块绑定上这4个文本组件,修改文本默认,调整样式;

快速搭建商品列表页面

再绑定一个图片,用于显示价格排序的升降序,图片组件的数据-属性这里可以直接设置显示的图片,图片来自图片库;

快速搭建商品列表页面

快速搭建商品列表页面

排序块已做好;

4. 接下来开始做商品列表,这里需要用到列表组件;

快速搭建商品列表页面

4.1根据设计图,商品列表中每一项包括一个图片、商品名称、和销售价;

在添加这三个组件前,可以用列表组件绑定一个块组件,一个块代表一个商品,列表组件就循环显示这些“块”,块组件再绑定一个图片、两个文本组件;

快速搭建商品列表页面

4.2接下来需要对列表组件和绑定的组件进行数据对接,列表组件的数据来源选择数据集商品列表;

快速搭建商品列表页面

然后创建需要显示的属性:图片、商品名称和价格;

快速搭建商品列表页面

4.3为了能让商品块下的组件对接上数据,商品块组件也要创建属性对应上列表组件的属性,然后图片、文本组件就能对应上商品块组件的属性了;

快速搭建商品列表页面

快速搭建商品列表页面

数据对接后,就可以继续调整样式了;

快速搭建商品列表页面

商品列表组件就做好了;

5. 接下来开始做底部导航栏,同理,先添加一个块组件,再绑定4个图片和4个文本组件;

这个导航栏和前面的排序块做法类型,唯一不同的是,定位类型要改成固定定位,固定在底部

快速搭建商品列表页面

预览效果:

快速搭建商品列表页面

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/435587.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[网络]NAT、代理服务、内网穿透、内网打洞

目录 一、NAT 1.1 NAT 技术背景 1.2 NAT IP 转换过程 1.3 NAPT(Network Address Port Translation) 1.地址转换表 2. NAPT(网络地址端口转换Network Address Port Translation) 3. NAT技术的缺陷 二、代理服务器 2.1 正向…

济南站活动回顾|IvorySQL中的Oracle XML函数使用示例及技术实现原理

近日,由中国开源软件推进联盟PG分会 & 齐鲁软件园联合发起的“PostgreSQL技术峰会济南站”在齐鲁开源社举办。瀚高股份IvorySQL作为合作伙伴受邀参加此次活动。 瀚高股份IvorySQL技术工程师 向逍 带来「IvorySQL中的Oracle XML函数兼容」的议题分享。在演讲中&a…

EasyCVR视频汇聚平台:解锁视频监控核心功能,打造高效安全监管体系

随着科技的飞速发展,视频监控技术已成为现代社会安全、企业管理、智慧城市构建等领域不可或缺的一部分。EasyCVR视频汇聚平台作为一款高性能的视频综合管理平台,凭借其强大的视频处理、汇聚与融合能力,在构建智慧安防/视频监控系统中展现出了…

后端Java-SpringBoot整合MyBatisPlus步骤(超详细)

1.新建项目。 2.点击完上一步的next之后,选择pom.xml文件中的依赖。 3.点击pom文件进行项目初始化。 按照下面的俩步骤刷新一下maven ,让文件生效 4.新建一个application.yml文件 5. 新建一个数据库mp,在数据库中新建一张user表 6.连接数据…

pdf文档翻译成英文很简单?搞定复杂的外语文献文档就靠它

转眼间又是一年国庆,怎么样,大一新生们适应得还好吗? 没事,刚到陌生的校园环境中,分分钟都在想家,还没适应集体宿舍生活很正常的...... 什么?已经有同学在着手准备写论文了?而且需要…

Facebook对现代社交互动的影响

自2004年成立以来,Facebook已经成为全球最大的社交媒体平台之一,改变了人们的交流方式和社交互动模式。作为一个数字平台,Facebook不仅为用户提供了分享生活点滴的空间,也深刻影响了现代社交互动的各个方面。本文将探讨Facebook如…

git使用“保姆级”教程4——版本回退及分支讲解

一、版本回退 1、历史回退(版本回退)——命令行git reset --hard 版本编号 注意:当前命令会让工作区的内容发生改变,可以理解成历史区(master分支)直接回到工作区比如:从版本4回到版本3,则工作区只会显示版本3的代码内容 1.1、指…

【Postgresql】安装新手教程

在以下postgresql官网下载软件 https://www.enterprisedb.com/downloads/postgres-postgresql-downloads下载完成后安装,找个记事本记录下安装过程中填写的数据库管理原的password和port 在所有程序目录中打开pgadmin 输入刚才的数据库管理员密码 自动跳转到以下…

腾讯二面:40亿QQ号, 1G内存,怎么去重?

面试这种场合,大家都懂,面试官总喜欢出点“奇奇怪怪”的题目,问你点“看似不可能”的问题——比如: 40亿个QQ号要去重,内存还只能给你1GB。 就像老板让你用两块钱预算搞个全公司团建,还得拍成《向往的生活》…

速通数据结构与算法第七站 排序

系列文章目录 速通数据结构与算法系列 1 速通数据结构与算法第一站 复杂度 http://t.csdnimg.cn/sxEGF 2 速通数据结构与算法第二站 顺序表 http://t.csdnimg.cn/WVyDb 3 速通数据结构与算法第三站 单链表 http://t.csdnimg.cn/cDpcC 4 速通…

1. 如何在服务器上租GPU跑实验 (以AutoDL为例) - 深度学习·科研实践·从0到1

目录 前言 1. 在AutoDL上注册账号 2. 在算力市场选择GPU 3. 创建实例 4. 控制台-容器实例界面(核心) 4.1 无卡模式(常用) 5. 帮助文档 前言 好记性不如烂笔头,本专栏将详细记录下本人学习深度学习工程实践&…

【Python】YOLO牛刀小试:快速实现视频物体检测

YOLO牛刀小试:快速实现视频物体检测 在深度学习的众多应用中,物体检测是一个热门且重要的领域。YOLO(You Only Look Once)系列模型以其快速和高效的特点,成为了物体检测的首选之一。本文将介绍如何使用YOLOv8模型进行…

【Git原理与使用】Git初识基本操作

Git初识&&基本操作 1.初识Git2.Git安装3.Git基本操作3.1创建Git本地仓库3.2配置Git3.3认识工作区、暂存区、版本库3.4添加文件3.5修改文件3.6版本回退3.7撤销修改3.8删除文件 点赞👍👍收藏🌟🌟关注💖&#x1f…

基于单片机8路数字电压表电压采集系统

**单片机设计介绍,基于单片机8路数字电压表电压采集系统 文章目录 前言概要功能设计设计思路 软件设计效果图 程序设计程序文章目录 前言 💗博主介绍:✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师,一名热衷于单片机技…

数据集-目标检测系列-鼠检测数据集 mouse >> DataBall

数据集-目标检测系列-鼠检测数据集 mouse >> DataBall 数据集-目标检测系列-老鼠检测数据集 mouse 数据量:6k 想要进一步了解,请联系。 DataBall 助力快速掌握数据集的信息和使用方式,会员享有 百种数据集,持续增加中。…

Redis 基础数据改造

优质博文:IT-BLOG-CN 一、服务背景 基础数据查询服务:提供航司、机场、票台、城市等基础数据信息。 痛点一:因为基础数据不属于频繁更新的数据,所以每个应用都有自己和缓存,当基础数据更新后,各个应用缓存…

用友U8+CRM leadconversion.php SQL注入复现

0x01 产品描述: 用友U8-CRM是企业利用信息技术,是一项商业策略,它通过依据市场细分组织企业资源、培养以客户为中心的经营行为、执行以客户为中心的业务流程等手段来优化企业的客户满意度和获利能力。 0x02 漏洞描述: 用友 U8 CR…

指定PDF或图片多个识别区域,识别区域文字,并导出到Excel文件中

常见场景 用户有大量图片/PDF文件,期望能将图片/PDF中的多个区域中的文字批量识别出来,并导入到Excel文件中。期望工具可以批量处理、离线识别(保证数据安全性)。手工操作麻烦。具体场景:用户有工程现场照片&#xff…

【学习笔记】基于 Wasserstein距离的分布鲁棒优化

衡量不同分布间距离 在构建模糊集的方式上,除了利用矩信息之外,另一种思路是衡量真实分布与经验分布之间的距离。在这种情况下,我们以经验分布为中心,将与经验分布不超过某一距离的所有分布纳入模糊集中。于是,如何定…

onlyoffice连接器(connector)开发使用精讲 二次开发 深入开发【二】

前言 这篇教程开始,全部为进阶版使用,你需要先熟悉使用最基础的连接器教程,如果你没有正常接入,请参考教程【一】:onlyoffice连接器(connector)开发使用精讲 二次开发 深入开发【一】_onlyoffice 连接器-CSDN博客 该教…