们选择客户关系管理（CRM）应用做演示。 本文主要讲解低代码工具配置生成应用的主体流程，更多的细节需要参考文档。

先从大迈云官网下载安装低代码工具,地址www.mvcx.net/download.html。 当然你如果手边有其他的低代码工具，可以直接使用， 基础层面的功能相差不大。

分六个主要步骤完成配置：

1、配置数据表与字段

2、设置数据表关联

3、配置枚举项

4、配置用户角色

5、配置菜单及授权

6、配置可用页面

官方演示地址: https://center.mvcx.net/web/index.html#/apps/doc/128

一、配置数据表与字段

客户关系管理（CRM）中，我们选择具有代表性的多张数据表用作配置。 分别是客户/财务合同/产品/财务合同明细/回款明细/开票明细 ， 每张表都配置了一系列字段。

数据表的细节参考官方演示的Excel表格。 按照Excel模板整理完多张表的字段，在后台一次性导入，创建数据结构。 一次性导入的目的，是为了项目有个整体的规划性，避免后面频繁修改数据表。后期可对数据结构（表与字段) 进行修改， 对单表增加字段，需要走完整的配置流程。 添加字段\字段授权\绑定字段到页面。

在创建数据结构的同时，我们可以选择同时创建默认操作页，包括表单页，列表查询页，展示页等， 自动化地完成基础CRUD功能。

二、设置数据表关联

在后台数据表->数据关联中设置表之间关系，等同于数据库外键。

财务合同 - N:1 - 客户

财务合同明细 - N:1 - 产品

财务合同明细 - N:1 - 财务合同

回款明细 - N:1 - 财务合同

开票明细 - N:1 - 财务合同

这里不涉及多对多的关系，相对简单。 设置完表关联后， 绝大多数的交叉调用， 都由系统自动来完成，包括多表查询，外键约束等。

三、配置枚举项

这里我们要用到枚举项有, 省份\公司类型\跟进状态\审核状态\合同类型\合同流程\合同进度\付款方式\产品状态\结算方式等。

在后台管理，基础数据中设置， 然后把枚举项绑定到对应字段，其他交给系统来完成。

四、配置用户角色

在后台管理->人员权限-> 角色权限里设置

企业管理系统，我们一般配置 user(普通用户), sales(销售) , manager(销售经理) , finance (财务) ,admin (系统管理员）, hr（人力资源) 等。

后面我们会根据角色，给相应的人员授权不同功能。 角色不完全等同于公司里的职位， 很多时候一个人是身兼多个角色。

五、配置菜单及授权

在后台管理 -> 菜单页面 -> 可用菜单中操作

先创建一级菜单， 然后创建二级，三级菜单。 菜单配置路由，才能导航到特定页,配置路由的简单方式， 在菜单页面->可用页面中，点击（+菜单），就把当前页添加到了菜单项中，

对应的路由也已设置。 熟悉后可以手动设置路由项，开启更多功能。 在菜单设置中，为当前菜单设置父菜单，以及排序。

对菜单进行角色授权，允许那些角色看到或使用那些菜单。 实时配置的菜单会在用户第二次登陆后生效，或直接当前页刷新网页。菜单可以配置图标, 颜色。这里我们分别设置客户，合同，产品等相关菜单

六、配置可用页面

在创建数据表时，系统已经默认创建了单表的表单页，列表查询页，详情展示页等。 我们对系统生成的页面进行进一步配置，来完善功能。 很多时候配置是设定交叉表的字段引用，系统会自动生成

绝大多数代码。 各种页面也存在组合形式，当前演示中，财务合同表单，就是组合页面类型，附带子表合同明细。 页面需要授权，绑定到菜单才能正式使用。

系统内置了十多种通用的页面模型， 这些模型都来自于常规应用的抽象，通过配置页面就完成了终端用户可用的功能。 很多功能都是PC端、移动端一起生成的。

这里的配置有比较多的细节、参数要调整 ，可以参考官方文档，或者安装应用后，直接看成型的配置。

配置完成后的演示截图。

如果你有1-2年的编程经验，可以很轻松地利用低代码工具搭建一个基础应用。

下面一个课时，我们将着重讲低代码编程的灵活性，怎样适应各种定制化的场景。 近几年来IT技术的发展，使得低代码编程能够覆盖更广的范围。

请关注我们的公z号: 大迈云， 可直接在大迈云官网mvcx.net下载低代码编程工具。

辑导语：在上下滚动页面时，除了出现吸顶，还会出现吸底、锚点等情况，那么这些都是在滚动页面时需要注意的控件。本文作者结合最近工作中的实际项目，对于滑动时的吸顶、锚点规则方式的总结心得，一起来学习下吧。

上下滚动页面时，除了出现吸顶，还会出现吸底、锚点等情况，这些都是在滚动页面时需要注意的控件。

结合最近工作中的实际项目，Cassie将滑动用到的场景进行了提炼，总结出这份控件设计规范，一起来学习吸底、锚点是如何在APP以及PC端应用的吧～

一、吸底

PC端及移动端的底部有一些操作栏，比如表单的填写操作或者支付按钮的放置，移动端底部还会有全局的导航栏，这些会占用一定的空间，可以根据使用场景灵活选择吸底方式。

需要注意吸底的是具有操作价值的内容，吸底元素包括操作按钮、 引导操作、移动端的导航栏…

1. 固定-PC端

PC端在表单内容较多、查看内容文章、需要引导用户操作比如支付等场景下，当用户需滑动查看更多内容，可将操作类按钮吸底，需要吸底的内容可以根据布局调整显示。

在左图PC端钉钉邮箱中，属于编辑表单类的，将发送操作按钮固定吸底，用户只需要修改部分字段，更利于快速完成编辑；在PC端简书中，属于内容展示类的，出于增强互动的目的，将评论、点赞等操作固定在底部增加其操作便捷性。

考试星PC端采用左中右布局，将提交考试放在右侧底部，可以不占用考试内容高度空间；百度学术PC端采用左右布局，右侧是一些介绍内容，所以操作按钮固定在和之有直接关系的左侧内容底部。

2. 固定-APP端

移动端底部常会有一些吸底的控件，比如底部导航栏、主操作按钮、需要引导或便捷用户操作的控件等。

一级页面导航固定在底部，当该页面有主按钮，比如结算等则将该栏放到导航栏上面，如果还有引导类或便捷操作类控件则再放到主操作栏上面。

移动端，特别是购物车场景存在多条吸底内容。

具有引导性的操作，为了配合主操作而出现，也是固定在底部，但位于底部操作上面，在特定场景下出现。

比如闲鱼提供了一些常用问题，可以跟卖家交流更便捷；考拉海购购物车的优惠引导也是固定在底部，类似的还有京东、淘宝等购物车。

3. 非固定-PC端

当PC端展示内容分多段，且其中有需要引导用户操作的按钮，建议在滚动到该段时将该操作按钮吸底，滚动到另外一段内容后再取消吸底。

考拉海购PC端的购物车页面，如果购物车内容比较多，支付栏是吸底的，向上滚动到购物车商品内容结束后，支付栏不吸底，下面展示推荐商品。

京东官网的购物车也是这种方式，但移动端主流购物车的支付都是固定在底部的。

4. 非固定-APP端

吸底内容可以根据具体情况显示或隐藏，这种非固定的方式常用于移动端阅读及查看话题评论时。

在微信读书的阅读状态时，为了给读者提供沉浸式体验，隐藏操作栏，上滑时再显示；在知乎热榜浏览主题内容时，主操作栏跟在内容下面，当页面滑动后主操作栏改变布局样式吸底展示。

二、锚点及回到顶部

锚点以回到顶部也属于页面滚动时需要的控件，配合滚动条用于跳转到页面指定位置。

PC端和移动端都可以在内容过多时使用回到顶部控件，PC端的锚点定位类似导航一样可以放到页面左侧或者右侧，但其实只是页面的内容定位。

移动端可以利用滚动条做时间轴类型的定位或者分页定位。

1. 回到顶部-PC端

当PC端页面内容区域比较长时比如瀑布流的使用，用户需要频繁返回顶部查看相关内容时，可以滚动后出现回到顶部控件。

花瓣PC端页面滚动后，右下角有一些功能操作，滚动后出现回到顶部控件。

2. 回到顶部-APP端

当页面内容区域比较长时；当用户需要频繁返回顶部查看相关内容时，可以使用回到顶端返回页面顶部。

如果当前页面是主页，可以滚动后主页按钮便成回到顶部按钮，这样可以避免遮挡内容，优化阅读体验。

京东购物车页面除了展示添加到购物车的商品外，底部还有推荐上面，滚动后出现回到顶部控件；每日优鲜APP页面滚动后，导航的主页按钮变成回到顶部按钮，优化体验，类似的还有淘宝、饿了么、考拉等主页有瀑布流的内容。

3. 锚点-PC端

当PC端有多条组合内容时，可以左侧做一个锚点定位配合滚动条快速定位到页面需要查看的内容。

当PC端使用上下布局时，且内容区域居中固定时，锚点悬浮在左侧显示，当屏幕小于一定尺寸时，锚点缩小悬浮于页面左侧，鼠标移入时再显示。

在优设的网址导航中，由于导航分为多个类型，所以将具体类型名称放到左侧展示，能快速定位到需要的内容。

当PC端左侧有导航，锚点定位可以放到右侧，常用于阅读文章等场景。

在Ant design的组件页，由于左侧有二级导航，所以将页面的锚点定位放在右侧，类似的还有语雀文章阅读。

4. 锚点-APP端

当有时间类型的内容比如浏览照片时，可以采取时间轴定位的方式快速滑动到需要查看的内容。

内容过多的情况下也可以采取分页的形式，滚动后将分页及回到顶部固定在底部右下角位置。

例如宝宝树APP采用时间轴的方式快速定位，默认状态定位控件缩小固定在右侧，滑动时控件变大显示具体时间，方便用户按时间快速查找照片，类似的还有百度网盘里的照片浏览。

豆瓣APP在电影的讨论模块，选择一个讨论查看详情滚动后底部显示回复的定位锚点，控件放在操作栏上面吸底展示。

作者： Cassie

原文链接：www.zcool.com.cn/article/ZMTM0ODkzMg==.html

本文由 @ Cassie 授权发布于人人都是产品经理，未经作者许可，禁止转载。

题图来自Unsplash，基于CC0协议。