在线教育平台小程序

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、点播页面