电商小程序10分类管理

目录

  • 1 分类数据源
  • 2 搭建功能
  • 3 创建变量读取数据
  • 4 绑定数据
  • 总结

本篇我们介绍一下电商小程序的分类管理功能的开发,先看我们的原型图:
在这里插入图片描述
在首页我们是展示了四个分类的内容,采用上边是图标,下边是文字的形式。使用低代码开发,首先是需要设计数据源。

1 分类数据源

在控制台的数据源菜单,我们创建一下分类的数据源,分别建立图标、名称、排序、是否在首页展示四个字段
在这里插入图片描述
图标我们使用图片类型,这样在后台维护的时候就可以直接上传图片,而是否在首页展示我们使用布尔值类型,这样可以控制分类的显示和隐藏的效果。

数据源创建好之后,需要录入测试数据,点击数据源的三个点功能,可以录入测试数据
在这里插入图片描述
在这里插入图片描述

2 搭建功能

数据准备好之后,就需要开发功能了。低代码的开发特点是使用组件进行组合,像这种有固定位置,固定数量的可以使用宫格导航组件实现。打开我们的应用,从右侧的组件库里拖入宫格导航组件来开发具体的功能

在这里插入图片描述
宫格导航我们的重点是先需要从数据源中读取出数据来,为此需要创建一个变量来读取数据

3 创建变量读取数据

在代码区点击新建,创建变量,在选择的时候选择微搭数据表查询
在这里插入图片描述
数据模型的话选择我们刚刚创建的分类数据源
在这里插入图片描述
在做条件过滤的时候,考虑到我们分类是否显示在首页上,我们设置条件为是否显示在首页上等于true
在这里插入图片描述

4 绑定数据

变量创建好之后我们就可以给宫格导航组件绑定数据了,绑定的思路是从数据源中依次取出四条数据,分别绑定到图标和标题的位置上
在这里插入图片描述
这里的细节是需要注意我们的索引,数组是通过索引来获取元素的,索引默认是从0开始,因此我们的四条数据的索引依次为0、1、2、3。再一个就是我们的变量需要通过链式调用来获取具体的属性,依次是通data的records里获取具体的字段信息

当这些都设置好之后,一个宫格导航组件就设置好了。当然我们这一节还没有设置事件,通常我们宫格导航在点击的时候需要跳转到具体的页面,这个功能我们在后续的篇幅中具体的实现。

总结

本篇我们介绍了分类功能的实现,先创建了分类的数据源,接着讲解了组件的配置过程。低代码的特点就是像搭积木的形式不断的进行组件的组合最终实现出想要的效果来。

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

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

相关文章

【系统分析师】-需求工程

一、需求工程 需求工程分为需求开发和需求管理。 需求开发:需求获取,需求分析,需求定义、需求验证。 需求管理:变更控制、版本控制、需求跟踪,需求状态跟踪。(对需求基线的管理) 1.1需求获取…

MySQL:合并查询语句

1、查询表的数据 t_book表数据 SELECT * FROM db_book.t_book; t_booktype表数据 SELECT * FROM db_book.t_booktype; 提醒: 下面的查询操作的数据来自上图查询表的数据 2. 使用 UNION 查询结果合并,会去掉重复的数据 使用UNION关键字是,数…

社区店经营口号大揭秘:如何吸引更多顾客?

社区店的经营口号是吸引顾客的重要工具,一个好的口号能够在短时间内传达店铺的特色和价值,并引起顾客的兴趣。 作为一名开鲜奶吧5年的创业者,我将分享一些关于社区店经营口号的干货,帮助你吸引更多的顾客。 1、突出独特卖点&…

群控代理IP搭建教程:打造一流的网络爬虫

目录 前言 一、什么是群控代理IP? 二、搭建群控代理IP的步骤 1. 获取代理IP资源 2. 配置代理IP池 3. 选择代理IP策略 4. 编写代理IP设置代码 5. 异常处理 三、总结 前言 群控代理IP是一种常用于网络爬虫的技术,通过使用多个代理IP实现并发请求…

优思学院|3步骤计算出Cpk|学习Minitab

在生产和质量管理中,准确了解和控制产品特性至关重要。一个关键的工具是Cpk值,它是衡量生产过程能力的重要指标。假设我们有一个产品特性的规格是5.080.02,通过收集和分析过程数据,我们可以计算出Cpk值,进而了解生产过…

CentOS 定时调度

文章目录 一、场景说明二、脚本职责三、参数说明四、操作示例五、注意事项 一、场景说明 本自动化脚本旨在为提高研发、测试、运维快速部署应用环境而编写。 脚本遵循拿来即用的原则快速完成 CentOS 系统各应用环境部署工作。 统一研发、测试、生产环境的部署模式、部署结构、…

Java中灵活使用Mockito

目录 Java中灵活使用Mockito引言Mockito简介基本用法实例演示使用场景和案例解决方案结语 Java中灵活使用Mockito 引言 Mockito是Java中常用的mock框架之一,用于进行单元测试时模拟对象的行为。本文将介绍Mockito的基本用法,并探讨如何在实际项目中灵活…

AP8P059 PIR 人体感应太阳能 LED 灯控制芯片

概述 AP8P059 是一款集成低压 LDO、光控、充电控制、过充保护、欠压保护、PIR感应、延时为一体的人体感应太阳能 LED灯控制芯片,只需要很少的外接元件,适用于锂电池供电的PIR人体感应LED灯具的应用。外置的一级带通增益放大器便于客户调整感应灵敏度&am…

QT MinGW64编译vlc源码

编译环境搭建 参考文章《QT Mingw32/64编译ffmpeg源码生成32/64bit库以及测试》,搭建msys64环境; 运行msys.exe,运行: pacman -S git subversion cvs automake autoconf libtool m4 make gettext pkg-config mingw-w64-i686-lua findutils …

docker配置数据默认存储路径graph已过时,新版本中是data-root

错误信息 我在修改/etc/docker/daemon.json文件中,添加存储路径graph字段。然后sudo systemctl restart docker包如下错误:使用journalctl -xeu docker.service错误信息,发现不能匹配graph字段。 原因 我的docker版本: 在doc…

mybatisplus整合flowable-ui-modeler报错

1、问题 Description:file [/Users/xingyuwei/Documents/project/java/springboot_01/target/classes/com/xingyu/mapper/TemplateMapper.class] required a single bean, but 2 were found:- sqlSessionFactory: defined by method sqlSessionFactory in class path resource…

TypeScript08:在TS中使用模块化

前言:tsconfig.json中的配置 一、前端领域中的模块化标准 前端领域中的模块化标准有: ES6、commonjs、amd、umd、system、esnext 二、 TS中如何书写模块化语句 TS 中,导入和导出模块,统一使用 ES6 的模块化标准。 myModule.ts &a…

Keil新版本安装编译器ARMCompiler 5.06

0x00 缘起 我手头的项目在使用最新版本的编译器后,烧录后无法正常运行,故安装5.06,测试后发现程序运行正常,以下为编译器的安装步骤。 0x01 解决方法 1. 下载编译器安装文件,可以去ARM官网下载,也可以使用我…

蓝桥杯练习系统(算法训练)ALGO-993 RP大冒险

资源限制 内存限制:64.0MB C/C时间限制:200ms Java时间限制:600ms Python时间限制:1.0s 问题描述 请尽情使用各种各样的函数来测试你的RP吧~~~ 输入格式 一个数N表示测点编号。 输出格式 一个0~9的数。 样例输入 0 样…

【airtest】自动化入门教程(三)Poco操作

目录 一、准备工作 1、创建一个pthon脚本 2、光标位置 2、选择Android 3、选择yes 二、定位元素 三、poco基于设备/屏幕 方式 1、poco.click( (x,y))基于屏幕点击相对坐标为x,y的位置 2、poco.get_screen_size() 3、poco.swipe(v1,v2)基于屏幕从v1位置滑到…

02.刚性事务

刚性事务 1.DTP模型 X/Open组织介绍 X/OPEN是一个组织(现在的open group)X/Open国际联盟有限公司是一个欧洲基金会,它的建立是为了向UNIX环境提供标准。它主要的目标是促进对UNIX语言、接口、网络和应用的开放式系统协议的制定。它还促进在…

初识C语言—常见关键字

变量的命名最好有意义 名字必须是字母&#xff0c;数字&#xff0c;下划线组成&#xff0c;不能有特殊字符&#xff0c;同时不能以数字开头 变量名不能是关键字 typedef---类型定义&#xff0c;类型重命名 #include <stdio.h>typedef unsigned int uint; //将unsigne…

ubuntu20.04设置docker容器开机自启动

ubuntu20.04设置docker容器开机自启动 1 docker自动启动2 容器设置自动启动3 容器自启动失败处理 1 docker自动启动 &#xff08;1&#xff09;查看已启动的服务 $ sudo systemctl list-units --typeservice此命令会列出所有当前加载的服务单元。默认情况下&#xff0c;此命令…

龙蜥Anolis 8.4 安装 salt-stack

Python3 安装 sudo dnf install python3 -y Install SaltStack Yum Repository sudo dnf install -y https://repo.saltstack.com/py3/redhat/salt-py3-repo-latest.el8.noarch.rpm sudo dnf makecache sudo dnf -y update 安装Salt-stack sudo dnf install -y salt-master …

Python自动化测试基础必备知识点总结

一、自动化测试的概念 性能系统负载能力稳定性过载操作下的系统瓶颈自动化测试&#xff0c;使用程序代替人工&#xff0c;可以提高测试效率性&#xff0c;自动化测试能自动化使用代码模拟大量用户&#xff0c;让用户请求多页和多用户并发请求收集参数&#xff0c;并对系统负载…