家政维修平台实战10：搭建首页

• 用户可以搜索服务
• 以轮播图显示广告
• 以图标加文字显示服务分类
• 以图文列表展示服务内容
• 展示优秀服务商
• 展示服务流程
• 展示底部导航菜单

原型图如下：

1 后台功能

我们现在已经搭建了后台，并且录入了数据，先是服务分类的列表

接着是服务内容的列表

基于后台的数据，我们来搭建一下首页

2 创建页面

点击创建页面的图标，创建我们的首页，将页面id修改为index


然后选择页面的三个点，将刚才创建的页面设置为首页，这样一打开小程序就是看到的这个页面

3 搭建页面布局

页面创建好了之后，需要搭建一下页面的布局。什么是页面布局，在我们原型里的底部导航菜单，一级导航页是都需要存在的。如果每一个一级导航页面我们都重复添加组件，一个是比较啰嗦，再一个后续如果要增加菜单，意味着要修改每一个页面，也不太友好。

因此微搭提供了页面布局的功能，你只需要设置一次，在创建页面的时候选择这个布局就可以。

在编辑器里点击页面布局的图标，切换到布局设计

然后选择tab栏导航布局

配置菜单的名称和图标，选择正确的跳转页面

切换回页面设计，选择页面组件，配置我们的布局为tab栏导航布局

配置好之后就可以看到底部导航栏就引用了我们刚才在布局里设置的菜单

4 搭建搜索框

我们原型第一部分是展示的搜索框，这一部分可以直接使用单行输入组件实现，选择第一行的第一列，添加一个单行输入组件

单行输入组件可以配置模板，选择搜索模板

5 搭建服务分类

服务分类是固定的，我们可以在第二行的每一列里搭建一个上边是图标组件，下边是文本组件的布局

5.1 创建变量

在搭建布局的时候图标我们已经在服务分类表里存好了，需要在页面上通过变量把它取出来，在代码区新建一个内置数据表查询的变量

在配置界面选择我们服务分类的数据表，配置查询条件、排序字段、页码等相关信息

查询条件我们配置的是分类状态等于启用

5.2 搭建布局

变量定义好之后就是搭建布局，在第一列添加普通容器，下边添加图标组件和文本组件，设置普通容器的布局为纵向排列，水平垂直居中

5.3 绑定数据

布局搭建好之后，我们给图标组件绑定数据，从我们的变量里取第一条数据的图标属性


按同样的方法绑定文本属性

其余的分类只需修改数组的索引即可

6 搭建热门服务

在我们的第三行，我们搭建一下热门服务，添加普通容器，下边添加文本和数据列表组件

文本组件，修改一下文本内容为热门服务，文本格式为H6

数据列表选择服务内容数据源，模板改为卡片列表

修改一下里边的文本组件，绑定为价格

总结

本篇我们讲解了一下首页的搭建过程，包括搜索内容、服务分类以及热门服务。微搭页面搭建总体就是分为三步，搭建布局、定义变量、变量绑定。当然布局组件还是比较多的，什么样的布局使用什么样的布局组件只能是在项目中进行积累。不同人的手法不一样，只要能实现功能即可。