页面路径：src/pages/index/index.vue

搜索框

首页搜索框点击以后会跳转到课程列表页，所以没有过多的交互，
直接使用uni-ui组件即可

  1. <!-- 搜索框 -->
  2. <v-search-bar @focus="focus" class="header"></v-search-bar>
  1. focus() {
  2.   // 点击首页搜索框，跳转到课程页面
  3.   uni.switchTab({
  4.     url: "/pages/course/index?focus=true",
  5.   });
  6. },

url后面带focus参数的目的是跳转到了课程页以后search-bar直接聚焦让用户进行输入操作

轮播图

定义接口

接口文档：https://www.yuque.com/xiumubai/fe/yf8tf3#sHXSf

  1. import Service from '@/utils/http';
  3. class Course extends Service {
  5.   /**
  6.    * @description: 获取首页banner图
  7.    * @param {*} options
  8.    * @return {*}
  9.    */
  10.   banner(options = {}) {
  11.     options.url = '/api/cms/banner';
  12.     return this.get(options);
  13.   }
  15. }
  17. const courseService = new Course();
  18. export default courseService;

调用接口

  1. import courseService from "@/services/course";
  2. export default {
  3.   data() {
  4.     return {
  5.        bannerList: [],
  6.     }
  7.   },
  8.   methods: {
  9.     async getBannerList() {
  10.       try {
  11.         const res = await courseService.banner();
  12.         this.bannerList = res.data.bannerList;
  13.       } catch (e) {
  14.         console.log("e", e);
  15.       }
  16.     },
  17.   }
  18. }

Tips: 对于api请求部分的代码，一定要try {} catch(e) {},这样即使接口挂掉了，也不会导致整个程序崩溃掉。

渲染视图

  1. <template>
  2.   <view class="swiper_box">
  3.     <swiper
  4.       class="swiper"
  5.       circular
  6.       indicator-dots
  7.       autoplay
  8.       :interval="2000"
  9.       indicator-color="#fff"
  10.       indicator-active-color="#26B7FF"
  11.       :duration="500"
  12.     >
  13.       <swiper-item v-for="item in bannerList" :key="item.src">
  14.         <view class="swiper_item uni_bg_red">
  15.           <image mode="heightFix" :src="item.imageUrl" />
  16.         </view>
  17.       </swiper-item>
  18.     </swiper>
  19.   </view>
  20. </template>

上面是一个基础的从定义接口，到调用接口，渲染数据的三步骤，后面所有的涉及接口操作都是这个步骤，可直接参考源码部分。

课程&大咖

接口地址：https://www.yuque.com/xiumubai/fe/yf8tf3#td9Jy
image.png

组件封装

从布局上来，课程和名师卡片样式基本一致，我们可以单独封装成组件做复用,针对个别不一致的地方使用参数进行控制，下面是一个v-vard组件,后面我们封装的所有组件都会以v-[name]的形式进行统一的命名。

  2. <template>
  3.   <view class="preferences">
  4.     <h2 class="preferences_title">
  5.       {{ title }}
  6.       <navigator
  7.         class="link"
  8.         :url="link"
  9.         :open-type="type === 'course' ? 'switchTab' : 'navigate'"
  10.         >
  11.         {{ linkTitle }}
  12.         <uni-icons type="right" size="12"></uni-icons>
  13.       </navigator>
  14.     </h2>
  15.     <slot></slot>
  16.   </view>
  17. </template>
  19. <script>
  20.   export default {
  21.     name: 'v-card',
  22.     props: {
  23.       title: {
  24.         type: String,
  25.         default: '热门',
  26.       },
  27.       linkTitle: {
  28.         type: String,
  29.         default: '全部',
  30.       },
  31.       type: {
  32.         type: String,
  33.         default: 'course',
  34.       },
  35.       link: {
  36.         type: String,
  37.         default: '',
  38.       },
  39.     },
  40.   };
  41. </script>
  43. <style lang="scss" scoped>
  44.   .preferences {
  45.     padding: 0 16px 24px 16px;
  46.     &_title {
  47.       color: $uni-text-color-white;
  48.       font-size: 14px;
  49.       margin-bottom: 10px;
  50.       justify-content: space-between;
  51.       align-items: center;
  52.       display: flex;
  53.       .link {
  54.         font-size: $uni-font-size-12;
  55.         color: $uni-text-color;
  56.       }
  57.     }
  58.   }
  59. </style>

v-vard-list组件

  1. <template>
  2.   <view class="preferences_list">
  3.     <view
  4.       class="preferences_list_item"
  5.       v-for="(item, index) in list"
  6.       :key="index"
  7.     >
  8.       <navigator
  9.         class="list_item_card"
  10.         :url="
  11.           type == 'course'
  12.             ? '/pages/course/detail?id=' + item.id
  13.             : '/pages/teacher/detail?id=' + item.id
  14.         "
  15.       >
  16.         <view class="list_item_card_img">
  17.           <image
  18.             alt="封面"
  19.             :mode="type === 'course' ? 'fill' : 'aspectFit'"
  20.             :src="type === 'course' ? item.cover : item.avatar"
  21.           />
  22.         </view>
  23.         <view class="list_item_card_content">
  24.           <h3 class="item_content_name">
  25.             {{ type === "course" ? item.title : item.intro }}
  26.           </h3>
  27.           <view class="item_content__labal">
  28.             <uni-icons
  29.               v-if="type === 'course'"
  30.               type="fire"
  31.               size="18"
  32.               color="#fa3f4e"
  33.             ></uni-icons>
  34.             <view
  35.               :class="['study_num', type === 'teacher' ? 'teacher_name' : '']"
  36.             >
  37.               <text v-if="type === 'course'">{{ item.lessonNum }}人已学习</text>
  38.               <text v-else>{{ item.name }}</text>
  39.             </view>
  40.           </view>
  41.           <view class="item-content_footer" v-if="type === 'course'">
  42.             <view class="footer_price">¥{{ item.price }}</view>
  43.             <view class="footer_buy_num">{{ item.buyCount }}人购买</view>
  44.           </view>
  45.         </view>
  46.       </navigator>
  47.     </view>
  48.   </view>
  49. </template>
  51. <script>
  52. export default {
  53.   name: "v-card-list",
  54.   props: {
  55.     list: {
  56.       type: Array,
  57.       default: [],
  58.     },
  59.     type: {
  60.       type: String,
  61.       default: "course",
  62.     },
  63.   },
  64. };
  65. </script>
  67. <style lang="scss" scoped>
  68. .preferences_list {
  69.   &_item {
  70.     padding-bottom: 8px;
  71.     display: inline-block;
  72.     width: 50%;
  73.     box-sizing: border-box;
  74.     &:nth-child(2n-1) {
  75.       padding-right: 4px;
  76.     }
  77.     &:nth-child(2n) {
  78.       padding-left: 4px;
  79.     }
  80.     .list_item_card {
  81.       display: block;
  82.       width: 100%;
  83.       &_img {
  84.         width: 100%;
  85.         height: 95px;
  86.         background-image: url("https://8.idqqimg.com/edu/mobilev2/m-core/3d1dd248376a6da4a15e0000184f44c6.png");
  87.         background-repeat: no-repeat;
  88.         background-size: contain;
  89.         border-radius: 8px 8px 0 0;
  90.         image {
  91.           height: 100%;
  92.           width: 100%;
  93.           border-radius: 8px 8px 0 0;
  94.         }
  95.       }
  96.       &_content {
  97.         background: $uni-bg-wrapper-color;
  98.         border-radius: 0 0 8px 8px;
  99.         .item_content_name {
  100.           height: 40px;
  101.           padding: 4px 4px;
  102.           color: $uni-text-color-name;
  103.           font-size: $uni-font-size-14;
  104.           white-space: normal;
  105.           overflow: hidden;
  106.           text-overflow: ellipsis;
  107.           display: -webkit-box;
  108.           -webkit-line-clamp: 2;
  109.           -webkit-box-orient: vertical;
  110.         }
  111.         .item_content__labal {
  112.           display: flex;
  113.           align-items: center;
  114.           padding: 0 4px;
  115.           .study_num {
  116.             font-size: $uni-font-size-12;
  117.             color: $uni-text-color-name;
  118.             margin-left: 4px;
  119.           }
  120.           .teacher_name {
  121.             color: #68cb9b;
  122.             margin-left: 0;
  123.             font-size: 14px;
  124.             margin-bottom: 4px;
  125.           }
  126.         }
  127.         .item-content_footer {
  128.           display: flex;
  129.           align-items: center;
  130.           padding: 4px;
  131.           .footer_price {
  132.             font-size: $uni-font-size-16;
  133.             color: $price-font-color;
  134.             margin-right: $uni-spacing-4;
  135.           }
  136.           .footer_buy_num {
  137.             font-size: $uni-font-size-12;
  138.             color: $uni-text-color-name;
  139.           }
  140.         }
  141.       }
  142.     }
  143.   }
  144. }
  145. </style>

使用组件

  1. <view class="preferences_wrapper">
  2.   <v-card
  3.     title="热门课程"
  4.     linkTitle="全部课程"
  5.     type="course"
  6.     link="/pages/course/index"
  7.   >
  8.     <v-card-list type="course" :list="courseList"></v-card-list>
  9.   </v-card>
  10.   <v-card
  11.     title="名师大咖"
  12.     linkTitle="全部名师"
  13.     type="teacher"
  14.     link="/pages/teacher/index"
  15.   >
  16.     <v-card-list type="teacher" :list="teacherList"></v-card-list>
  17.   </v-card>
  18. </view>

接口定义和调用参考轮播图部分，或可直接看源码src/services/course.js，形式一模一样，这里不再过多甩文。
对于跳转链接的区分：

  1. navigateTo(link, type) {
  2.   if (type === "course") {
  3.     uni.switchTab({ url: link });
  4.   } else if (type === "teacher") {
  5.     uni.navigateTo({ url: link });
  6.   }
  7. },

返回顶部

返回顶部这个组件需要单独讲一讲具体的封装过程，图示如下：
image.png
封装这个组件我们需要考虑下面几个点：

  • 什么条件显示返回顶部按钮
  • 点击返回顶部如何平滑返回顶部
  • 按钮位置需要可配置

下面我们来封装这个组件

  1. <template>
  2.   <view
  3.     class="back_top"
  4.     v-show="show"
  5.     @click="backTop"
  6.     :style="{ bottom: bottom, right: right }"
  7.     >
  8.     <image
  9.       src="https://cdn-cos-ke.myoed.com/ke_proj/mobilev2/m-core/03de0936a7aafee76646b8b2d5fa5b4f.png"
  10.       />
  11.   </view>
  12. </template>
  14. <script>
  15.   export default {
  16.     name: 'v-back-top',
  17.     props: {
  18.       bottom: {
  19.         type: [String, Number],
  20.         default: 20,
  21.       },
  22.       right: {
  23.         type: [String, Number],
  24.         default: 10,
  25.       },
  26.     },
  27.     data() {
  28.       return {
  29.         show: false,
  30.         scrollHeight: 0,
  31.       };
  32.     },
  33.     mounted() {
  34.       // 必须在page层级页面触发onPageScroll方法，才能接受到事件
  35.       uni.$on('onPageScroll', (e) => {
  36.         uni.getSystemInfo({
  37.           success: (res) => {
  38.             this.scrollHeight = e.scrollTop - res.windowHeight;
  39.             this.show = this.scrollHeight > 0 ? true : false;
  40.           },
  41.         });
  42.       });
  43.     },
  44.     methods: {
  45.       backTop() {
  46.         if (this.scrollHeight > 0) {
  47.           uni.pageScrollTo({
  48.             duration: 500,
  49.             scrollTop: 0,
  50.             success: () => {
  51.               this.show = false;
  52.             },
  53.           });
  54.         }
  55.       },
  56.     },
  57.   };
  58. </script>
  60. <style lang="scss" scoped>
  61.   .back_top {
  62.     position: fixed;
  63.     right: 10px;
  64.     bottom: 30px;
  65.     z-index: 10000;
  66.     width: 52px;
  67.     height: 52px;
  68.     image {
  69.       width: 100%;
  70.       height: 100%;
  71.     }
  72.   }
  73. </style>

:::info

  1. 判断返回顶部显示条件，当滚动高度-窗口高度>0即可显示；
  2. 点击返回顶部，使用uni.pageScrollTo()方法使滚动条滚动到顶部，并给添加duration参数，平滑滚动；
  3. 定义props为right和bottom来控制按钮位置。 ::: 在上面的代码中我们使用了uni.$on('onPageScroll')做了事件监听，因为在子组件中无法监听到页面滚动的事件，只能在在父组件来触发，具体代码如下：
    1. // 监听滚动事件，控制返回顶部按钮
    2. onPageScroll(res) {
    3. uni.$emit("onPageScroll", res);
    4. },
    具体使用：
    1. <template>
    2. <view>
    3.  <v-back-top></v-back-top>
    4. </view>
    5. </template>