1、总体概况:
应用到的页面有index(首页)、course(课程)、my(我的),所使用的的自定义组件有my-search(搜索框)、my-TopTabbar(自定义顶部导航栏)、my-ToggleBar(自定义状态栏)、my-course(课程组件)、mask(遮罩层组件)。
2、使用到的技术
uniapp、原生小程序、vue、uni-ui
3、平台整体设计
首页
课程列表页
课程详细页
点播页面
4、设计步骤
4.1、底部tabbar设置
首先创建三个页面,分别为index.vue(首页)、course.vue(课程)、my.vue(我的),然后在pages.json脚本文件中添加“tabbar”节点,配置每个页面的路由,每个页面底下的文本以及页面激化和未激化的logo路径。
4.2、自定义顶部导航栏(my-TopTabbar)
首先创建my-TopTabbar组件,组件内容如下:
回到pages.json配置脚本中,在需要设置自定义顶部导航栏的页面的style节点中添加"navigationStyle": "custom"
回到index页面调用my-TopTabbar组件
4.3、自定义搜索框(同理)
4.4、首页的制作
首页的制作可以分为搜索框(以上已完成)、轮播图、滚动公告栏、功能金刚区以及课程分栏。其中需要说明的是滚动公告栏的制作。
4.5、课程列表的制作
该页面主要使用了my-course组件,并且根据每个分栏不同,course页面利用父传子的特点向my-course组件传递的数据不同,所显示的课程及数量也不同。
子组件my-course:
父组件course页面:
达到效果:
4.6、课程详情页
创建一个额外的文件夹subpkg,用于存放那些非tabbar页面和组件的页面。在此之上创建课程详情页。该页面中包含了轮播图、遮罩层、图片的预览效果功能。
这里需要注意的一点是, 所调用图片预览效果时,需要预览的图片http链接列表须是在线图片,不然加载不出来。
4.7、点播页面