小程序提交

pages/course/homepage/homepage.js

@@ -6,7 +6,14 @@ Page({
 
   data: {
     // 初始时置空，待接口返回后再渲染
-    courseList: []
+    banners: [
+      './image/banner.png',
+      './image/banner.png',
+      './image/banner.png',
+      './image/banner.png'
+    ],
+    courseList: [],
+    globalImgUrl
   },
 
   // 跳转课程列表页

pages/course/homepage/homepage.wxml

@@ -1,47 +1,35 @@
 <view class="flex-col page">
   <view class="flex-col self-stretch group">
     <view class="flex-row justify-center items-center section" bind:tap="gotoSearch">
-      <image
-        class="image"
-        src="./image/sousuo.png"
-      />
+      <image class="image" src="./image/sousuo.png" />
       <text class="text ml-3">搜索更多好课</text>
     </view>
-    <swiper class="swiper" autoplay="true" circular="true"></swiper>
+    <swiper class="swiper" autoplay="true" circular="true" interval="3000" circular="true">
+      <block wx:for="{{banners}}" wx:for-item="img" wx:key="index">
+        <swiper-item>
+          <image src="{{img}}" class="swiper-image" mode="aspectFill" />
+        </swiper-item>
+      </block>
+    </swiper>
   </view>
   <view class="flex-row equal-division">
-    <view class="flex-col items-center group_2 group_1" bind:tap="gotoCourseList" data-type="{{ '考公考研' }}">
-      <image
-        class="image_3"
-        src="./image/kgky.png"
-      />
-      <text class="font text_1 mt-12">考公考研</text>
+    <view class="flex-col items-center group_2 group_1" bind:tap="gotoCourseList" data-type="{{ '考研' }}">
+      <image class="image_3" src="./image/kgky.png" />
+      <text class="font text_1 mt-12">考研</text>
     </view>
-    <view class="flex-col items-center group_2 group_3" bind:tap="gotoCourseList" data-type="{{ '自媒体' }}">
-      <image
-        class="image_3"
-        src="./image/zmt.png"
-      />
-      <text class="font text_3 mt-12">自媒体</text>
+    <view class="flex-col items-center group_2 group_3" bind:tap="gotoCourseList" data-type="{{ '考公' }}">
+      <image class="image_3" src="./image/zmt.png" />
+      <text class="font text_3 mt-12">考公</text>
     </view>
-    <view class="flex-col items-center group_2 group_4" bind:tap="gotoCourseList" data-type="{{ '财经' }}">
-      <image
-        class="image_3"
-        src="./image/cj.png"
-      />
-      <text class="font text_4 mt-12">财经</text>
+    <view class="flex-col items-center group_2 group_4" bind:tap="gotoCourseList" data-type="{{ '考证' }}">
+      <image class="image_3" src="./image/cj.png" />
+      <text class="font text_4 mt-12">考证</text>
     </view>
   </view>
   <text class="self-start text_2">热门课程</text>
   <view class="flex-col self-stretch list">
     <!-- items 数组循环 -->
-    <view
-      class="flex-row relative group_5"
-      wx:for="{{courseList}}"
-      wx:for-item="item"
-      wx:for-index="index"
-      wx:key="item.id"
-    >
+    <view class="flex-row relative group_5" wx:for="{{courseList}}" wx:for-item="item" wx:for-index="index" wx:key="item.id">
       <view bind:tap="gotoCourseDetail" data-id="{{item.id}}">
         <view class="list-divider pos_3"></view>
         <!-- 绑定课程封面图 -->

pages/course/homepage/homepage.wxss

@@ -134,4 +134,9 @@
   width: 691.88rpx;
   height: 324.38rpx;
   margin-top: 22.5rpx;
+}
+/* 轮播图图片 */
+.swiper-image {
+  width: 100%;
+  height: 100%;
 }