feat: 增加设置激活颜色

sadais-org · Oct 9, 2020 · 8b4407b · 8b4407b
1 parent 72da085
commit 8b4407b
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 11 deletions.
diff --git a/components/pi-swiper/index.vue b/components/pi-swiper/index.vue
@@ -15,21 +15,15 @@
       :style="[swiperStyle]"
       @change="handleSwiperChange"
     >
-      <swiper-item
-        v-for="(img, index) in imgs"
-        :key="img"
-        class="swiper-item"
-        :style="{
-          padding: effect3d && val !== index ? '0 20rpx' : 0
-        }"
-      >
+      <swiper-item v-for="(img, index) in imgs" :key="img" class="swiper-item">
         <view
           class="swiper-image-wrap"
           :class="[val != index ? 'list-scale' : '']"
           :style="[
             {
               borderRadius: `${borderRadius}rpx`,
-              transform: effect3d && val !== index ? 'scaleY(0.9)' : 'scaleY(1)'
+              transform: effect3d && val !== index ? 'scaleY(0.9)' : 'scaleY(1)',
+              padding: effect3d && val !== index ? '0 20rpx' : 0
             }
           ]"
           @tap="$emit('click', index)"
@@ -53,7 +47,15 @@
         <view
           v-for="(item, index) in imgs"
           :key="index"
-          :class="`indicator-item ${indicatorType} ${index === val ? 'active' : ''}`"
+          class="indicator-item"
+          :class="[index === val ? 'active' : '', indicatorType]"
+          :style="[
+            index === val && indicatorActiveColor
+              ? {
+                  backgroundColor: indicatorActiveColor
+                }
+              : {}
+          ]"
         />
       </template>
     </view>
@@ -134,6 +136,11 @@ export default {
         return ['tl', 'tc', 'tr', 'bl', 'bc', 'br'].includes(value)
       }
     },
+    // 指示器激活颜色，不设置默认为主题色
+    indicatorActiveColor: {
+      type: String,
+      default: swiper.indicatorActiveColor
+    },
     // 是否开启3d效果
     effect3d: {
       type: Boolean,
@@ -232,6 +239,8 @@ export default {
   transform: translateY(0);
   .swiper-item {
     box-sizing: border-box;
+    width: 100%;
+    height: 100%;
     overflow: hidden;
     .swiper-image-wrap {
       position: relative;
@@ -274,7 +283,6 @@ export default {
         border-radius: 20rpx;
         &.active {
           width: 30rpx;
-          background-color: $pi-primary-color;
         }
       }
       &.rect {

diff --git a/config/swiper.js b/config/swiper.js
@@ -8,6 +8,7 @@ export default {
   bgColor: 'transparent', // 背景颜色
   indicatorType: 'number', // 指示器模式 rect / dot / number / none
   indicatorPosition: 'br', // 指示器的位置 tl 左上角/ tc 上中/ tr 右上角/ bl 左下角/ bc 下种 /br 右下角
+  indicatorActiveColor: '', // 指示器激活颜色，不设置默认为主题色
   effect3d: false, // 是否开启3d效果
   effect3dPreviousMargin: 50, // effect3d = true的情况下，激活项与前后项之间的距离，单位rpx
   autoplay: true, // 是否自动播放