首页招生官轮播图的指示器样式

component/admission-box/admission-box.js

@@ -87,11 +87,44 @@ Component({
                 this.setData({
                     urls,
                 })
+                
+                this.calculateIndicator()
 
                 if (urls.length != 0) this.setCountDown(0)
             })
         },
 
+        // 0是小 1是大
+        calculateIndicator() {
+            const urls = this.data.urls
+            const current = this.data.admissionCurrent
+            let length = urls.length
+            let startIndex = current - 2
+            let endIndex = current + 2
+            urls[this.data.admissionCurrent]['current'] = 2
+            if (startIndex < 0) {
+                endIndex = endIndex + Math.abs(startIndex)
+                startIndex = 0
+            }
+
+            if (endIndex >= length) {
+                startIndex = length - 5
+                endIndex = length - 1
+            }
+
+            urls.forEach((element, index) => {
+                element['current'] = -1
+                if (index == startIndex || index == endIndex) element['current'] = 0
+                if (index > startIndex && index < endIndex) element['current'] = 1
+                if ((index == startIndex && index == 0) || (index == endIndex && index == length - 1)) element['current'] = 1
+                if (index == current) element['current'] = 2
+            })
+
+            this.setData({
+                urls,
+            })
+        },
+
         bindanimationfinish(e) {
             const current = e.detail.current || 0
             this.setData({
@@ -99,6 +132,7 @@ Component({
             })
 
             this.setCountDown(current)
+            this.calculateIndicator(current)
         },
 
         setCountDown(index) {

component/admission-box/admission-box.less

@@ -143,22 +143,47 @@
         }
     }
 
+    .indicator-box {
+        height: 55rpx;
+        padding: 20rpx 0;
+        position: relative;
+        display: flex;
+        justify-content: center;
+    }
+
     .indicator {
-        height: 27rpx;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
 
         .item {
-            width: 7.5rpx;
-            height: 7.5rpx;
             background-color: rgba(215, 215, 215, 1);
             border-radius: 30rpx;
-
-            &:not(:last-of-type) {
-                margin-right: 7.5rpx;
-            }
+            width: 0;
+            height: 0;
+            transition: all .3s;
 
             &.pitch {
                 background-color: rgba(250, 107, 17, 1);
             }
+
+            &.tiny {
+                width: 10rpx;
+                height: 10rpx;
+            }
+
+            &.pitch,
+            &.tiny1 {
+                width: 15rpx;
+                height: 15rpx;
+            }
+
+            &.pitch,
+            &.tiny,
+            &.tiny1 {
+                margin-right: 7.5rpx;
+                display: block;
+            }
         }
     }
 }

component/admission-box/admission-box.wxml

@@ -35,8 +35,10 @@
             </view>
         </swiper-item>
     </swiper>
-
-    <view class="indicator flexcenter">
-        <view class="item {{ admissionCurrent == index ? 'pitch' : '' }}" wx:for="{{ urls }}" wx:key="index"></view>
+    
+    <view class="indicator-box">
+        <view class="indicator flexcenter">
+            <view class="item {{ item.current == 2 ? 'pitch' : '' }} {{ item.current == 1  ? 'tiny1' : '' }} {{ item.current == 0  ? 'tiny' : '' }}" wx:for="{{ urls }}" wx:key="index"></view>
+        </view>
     </view>
 </view>

component/admission-box/admission-box.wxss

@@ -123,21 +123,43 @@
   text-overflow: ellipsis;
   -webkit-line-clamp: 2;
 }
+.admission-box .indicator-box {
+  height: 55rpx;
+  padding: 20rpx 0;
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
 .admission-box .indicator {
-  height: 27rpx;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
 }
 .admission-box .indicator .item {
-  width: 7.5rpx;
-  height: 7.5rpx;
   background-color: #d7d7d7;
   border-radius: 30rpx;
-}
-.admission-box .indicator .item:not(:last-of-type) {
-  margin-right: 7.5rpx;
+  width: 0;
+  height: 0;
+  transition: all 0.3s;
 }
 .admission-box .indicator .item.pitch {
   background-color: #fa6b11;
 }
+.admission-box .indicator .item.tiny {
+  width: 10rpx;
+  height: 10rpx;
+}
+.admission-box .indicator .item.pitch,
+.admission-box .indicator .item.tiny1 {
+  width: 15rpx;
+  height: 15rpx;
+}
+.admission-box .indicator .item.pitch,
+.admission-box .indicator .item.tiny,
+.admission-box .indicator .item.tiny1 {
+  margin-right: 7.5rpx;
+  display: block;
+}
 .admissionState {
   width: 120rpx;
   height: 36rpx;

utils/util.js

@@ -494,7 +494,7 @@ function statistics(obj) {
         const currentPage = pages[pages.length - 1]; // 当前页面对象
         url = currentPage?.route || 'pages/newIndex/index'
         // console.log("url", url);
-        options = currentPage.options
+        if (currentPage) options = currentPage.options
     }
 
     // 当页面显示时执行