培训小程序首页开发

@TOC

我们本篇来开发一下我们小程序的首页，先看一下原型

在这里插入图片描述

1 定义变量

因为我们首页展示的分类信息，现在分类信息已经存到了数据源里，我们要通过变量读取出来。

先打开我们创建的自定义应用，在代码区点击新建，创建一个数据表查询

在这里插入图片描述

数据表选择分类，方法选择查询列表

在这里插入图片描述

2 欢迎语搭建

变量定义好之后就要考虑组件搭建，页面的话我们头部添加一个背景图，中间部分用图标加文字的形式展示

想添加一个普通容器作为背景

在这里插入图片描述

设置高度为250px，背景为图片背景

在这里插入图片描述

在添加一个普通容器用来放置我们的欢迎语，高度设置为149px

在这里插入图片描述

继续添加一个普通容器，用来显示文本，设置40px的内边距

在这里插入图片描述

里边添加两个文本组件

在这里插入图片描述

修改文本组件的内容，设置12px的内边距，设置第一个文本组件的文本格式为H4

在这里插入图片描述

3 分类导航搭建

选中最外层的普通容器，添加一个普通容器来放置我们的分类信息

在这里插入图片描述

设置一定的背景色和圆角

在这里插入图片描述

继续添加一个普通容器，宽设置为94%，外边距为auto，这样就让普通容器居中显示

在这里插入图片描述

self {
    width: 94%;
    margin-right: auto;
    margin-left: auto;
    padding-top: 50px;
    padding-right: 7.5px;
    padding-left: 7.5px
}

普通容器里添加一个数据列表，数据源选择分类，模板选择图文列表

在这里插入图片描述

先精简一下组件，只保留图片和文本组件

在这里插入图片描述

然后将边框的样式去掉

在这里插入图片描述

然后给普通容器绑定背景色

在这里插入图片描述

在这里插入图片描述

现在组件之间有点挤，设置一点下外边距

在这里插入图片描述

4 搭建底部导航

首页部分我们需要有一个底部导航栏，添加一个tab栏组件，并设置好标签列表

在这里插入图片描述

总结

本篇带着大家搭建了一下首页，主要需要掌握页面的布局和数据列表组件的设置。微搭的组件已经提供了丰富的属性，熟练掌握每个组件的属性是低码开发的必备技能。