1

component/hot/hot.js

@@ -24,7 +24,8 @@ export const hotInit = (that) => {
         winH: that.data.winH,
         searchIcon: true,
         unReadMessageNum: 0,
-        myCourse: []
+        myCourse: [],
+        swiperCurrent: 0
         // circular: true
       }
     }),
@@ -49,7 +50,7 @@ export const hotInit = (that) => {
         [str]: true
       })
     }
-  
+
   // 输入框输入
   that.inputHandler = (e) => {
     that.setData({
@@ -109,8 +110,8 @@ export const hotInit = (that) => {
       that.setData({
         [recommendIndex]: recommendTemp
       });
-      httpRequestApi.userIntoPage('pages/index/index','首页推荐').success((res)=>{
-        
+      httpRequestApi.userIntoPage('pages/index/index', '首页推荐').success((res) => {
+
       })
     })
   }
@@ -180,4 +181,12 @@ export const hotInit = (that) => {
   that.getHotRecommend(that.uid, 1, 3);
   // 获取全部课本
   // that.getBookList();
+  that.swiperChange = (e) => {
+    console.log(e)
+    const str = 'hotData.swiperCurrent'
+    that.setData({
+      [str]: e.detail.current
+    });
+    console.log(that.data.hotData)
+  }
 }

component/hot/hot.wxml

@@ -1,7 +1,11 @@
 <template name="hot">
     <view class="messageSection" wx:if="{{hotData.unReadMessageNum > 0}}" bindtap="goToMessage">
-        <image class="messageIcon" src="../../static/image/message_icon.png"  />
-        <text class="messageText">您有<text class="red-text">{{hotData.unReadMessageNum}}</text>条未读消息【立即查看】</text>
+        <image class="messageIcon" src="../../static/image/message_icon.png" />
+        <text class="messageText">
+            您有
+            <text class="red-text">{{hotData.unReadMessageNum}}</text>
+            条未读消息【立即查看】
+        </text>
     </view>
     <view class="myCourseSection">
         <view class="title-regular">我的课程</view>
@@ -31,7 +35,7 @@
     </view>
     <view class="swiperSection">
         <view class="title-regular swiper-title">官方推荐</view>
-        <swiper previous-margin="0" next-margin="243rpx" circular="{{true}}" autoplay="{{hotData.autoplay}}" interval="{{hotData.interval}}" duration="{{hotData.duration}}" circular="{{hotData.circular}}">
+        <swiper previous-margin="0" next-margin="243rpx" bindchange="swiperChange" current="{{hotData.swiperCurrent}}" circular="{{true}}" autoplay="{{hotData.autoplay}}" interval="{{hotData.interval}}" duration="{{hotData.duration}}" circular="{{hotData.circular}}">
             <block wx:for="{{hotData.recommend}}" wx:key="{{index}}">
                 <swiper-item class="slide-item" bindtap="openClass" data-classId="{{item.classId}}" data-title="{{item.title}}">
                     <image src="{{item.img}}" data-type="{{item.type}}" data-id="{{item.id}}" class="slide-image" />
@@ -42,11 +46,16 @@
                 </swiper-item>
             </block>
         </swiper>
+        <view class="swiper-dots-wrapper">
+            <block wx:for="{{hotData.recommend}}" wx:key="{{index}}">
+                <view class="swiper-dots {{hotData.swiperCurrent === index ? 'dot-active' : ''}}">
+                    <text>{{index + 1}}</text>
+                </view>
+            </block>
+        </view>
     </view>
     <view class="recommdSection">
-        <view class="recommd-title">
-            热门作品
-        </view>
+        <view class="recommd-title">热门作品</view>
         <view class="hotWares">
             <view wx:for="{{hotData.hotWorks}}" wx:key="{{index}}" class="worksCard" bindtap="openWorks" data-readId="{{item.classId}}" data-title="{{item.title}}">
                 <view class="topData">

component/hot/hot.wxss

@@ -294,6 +294,30 @@ swiper {
     left: 32rpx;
 }
 
+.swiper-dots-wrapper{
+    display: flex;
+    position: absolute;
+    right: 13rpx;
+    top: 17rpx;
+}
+
+.swiper-dots{
+    width: 28rpx;
+    height: 28rpx;
+    background: #D0D0D0;
+    border-radius: 50%;
+    font-size: 24rpx;
+    line-height: 28rpx;
+    text-align: center;
+    color: #fff;
+    font-weight: 800;
+    margin-right: 5rpx;
+}
+
+.dot-active{
+    background: #12c962;
+}
+
 .myCourseSection .myCoursePlaceHolder {
     width: 100%;
     height: 100%;