1 创建页面

2 面包屑效果

第一部分内容,先要有个面包屑的效果,可以返回上一级菜单,我们通过文本组件来搭建

给第一个文本组件,设置点击事件,配置方法为打开页面,选择课程中心

3 搭建基本信息

第二行的列设置为2用来搭建基本信息

第一列放置图片组件

选中页面组件,添加URL参数,用来接收传入的课程的数据标识

创建一个变量用来读取课程的基本信息,查询条件设置为数据标识等于我们的URL参数


将图片的地址绑定为封面图片

第二列添加一个文本组件,文本内容绑定为课程分类的名称

继续添加文本绑定为课程的名称

继续添加文本,绑定为课程的描述

优学教育官方03课程详情
继续搭建布局,显示课程的评分和报名人数的统计信息

继续添加布局,搭建课程基本信息

继续搭建布局,添加价格信息

4 搭建页签效果

第三行的列里添加顶部选项卡组件

修改标签的内容为课程概述、课程大纲、师资介绍、开课时间、学员评价


打开切换标签显示不同组件的配置

在课程概述的选项卡里添加富文本展示组件,绑定具体的字段

5 搭建联系信息

在第四行里搭建相应的布局,显示我们的联系信息

从首页将底部的内容粘贴过来

6 配置页面跳转

回到我们的课程中心页面,给容器设置点击事件,跳转到详情页,并且传入数据标识

整体效果

配置好了之后,点击卡片就可以看到课程详情的具体效果