家政预约小程序06活动展示

1 创建变量

要想显示活动信息，需要先创建变量来从数据源中读取。打开我们的小程序，在代码区点击+号创建变量

选择新建内置数据表查询

选择活动管理数据表，触发方式选择入参变化时自动执行

增加数据筛选条件，设置为活动状态等于进行中，是否在首页展示等于true

2 搭建布局

变量创建好了之后，我们需要搭建布局来显示活动的图片。在Tab栏导航布局的内容插槽里添加普通容器，普通容器下添加图片组件

选择布局模式为裁剪填满

选择图片组件的地址属性的fx，我们绑定一下数据

绑定为活动展示图片

设置图片宽100%，高80px

设置圆角半径，设置10

给普通容器设置左右各10的内边距

3 创建活动详情页

当用户点击图片的时候，我们要跳转到详情页。点击页面创建的图标，创建详情页


选择页面组件，点击新建URL参数

创建活动的标识activityid

在页面组件下添加数据详情组件，数据源选择活动管理

设置数据筛选，筛选条件设置为数据标识等于我们的URL参数

4 搭建详情页布局

将数据详情生成的布局删掉

先添加普通容器，里边添加图片组件，设置布局模式为裁剪填满

点击地址的fx，从数据详情里绑定活动宣传图片字段

设置图片的宽度为100%，高度为80px

继续添加普通容器，里边添加两个文本组件，第一个文本组件我们绑定为活动的名称

第二个文本绑定为活动的起止时间

普通容器设置一定的内边距

继续添加普通容器，里边添加标签选择组件

标签选择我们要显示活动的规则，为此要创建一个变量来获取规则，点击立即新建，创建内置数据表查询

数据源选择活动规则表

入参设置为所属活动等于URL参数

给标签选择绑定选项，使用表达式进行绑定

继续添加普通容器，里边添加富文本展示组件

内容绑定为活动描述字段

继续添加普通容器，里边添加按钮组件

设置普通容器的布局为横向排列，水平垂直居中

5 设置页面跳转

回到首页，我们给图片增加点击事件，跳转到详情页


跳转的时候我们要传入活动的数据标识

至此，我们就完成了活动展示的页面搭建

总结

我们本篇讲解了在首页显示活动图片，点击图片跳转到活动详情的功能。主要需要熟悉数据详情组件的搭建过程，理解页面跳转时候需要提前设置好URL参数，在跳转的时候要传入具体的参数。下一篇我们讲解一下用户在打开页面写入数据以及参加活动时记录用户选择的信息。