bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

 minipro_standard/uni_modules/uview-ui/components/u-swiper-indicator/u-swiper-indicator.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,110 @@
<template>
   <view class="u-swiper-indicator">
      <view
         class="u-swiper-indicator__wrapper"
         v-if="indicatorMode === 'line'"
         :class="[`u-swiper-indicator__wrapper--${indicatorMode}`]"
         :style="{
            width: $u.addUnit(lineWidth * length),
            backgroundColor: indicatorInactiveColor
         }"
      >
         <view
            class="u-swiper-indicator__wrapper--line__bar"
            :style="[lineStyle]"
         ></view>
      </view>
      <view
         class="u-swiper-indicator__wrapper"
         v-if="indicatorMode === 'dot'"
      >
         <view
            class="u-swiper-indicator__wrapper__dot"
            v-for="(item, index) in length"
            :key="index"
            :class="[index === current && 'u-swiper-indicator__wrapper__dot--active']"
            :style="[dotStyle(index)]"
         >

         </view>
      </view>
   </view>
</template>

<script>
   import props from './props.js';
   /**
    * SwiperIndicator è½®æ’­å›¾æŒ‡ç¤ºå™¨
    * @description è¯¥ç»„件一般用于导航轮播，广告展示等场景,可开箱即用，
    * @tutorial https://www.uviewui.com/components/swiper.html
    * @property {String | Number}   length               è½®æ’­çš„长度（默认 0 ï¼‰
    * @property {String | Number}   current               å½“前处于活动状态的轮播的索引（默认 0 ï¼‰
    * @property {String}         indicatorActiveColor   æŒ‡ç¤ºå™¨éžæ¿€æ´»é¢œè‰²
    * @property {String}         indicatorInactiveColor   æŒ‡ç¤ºå™¨çš„激活颜色
    * @property {String}         indicatorMode         æŒ‡ç¤ºå™¨æ¨¡å¼ï¼ˆé»˜è®¤ 'line' ï¼‰
    * @example   <u-swiper :list="list4" indicator keyName="url" :autoplay="false"></u-swiper>
    */
   export default {
      name: 'u-swiper-indicator',
      mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
      data() {
         return {
            lineWidth: 22
         }
      },
      computed: {
         // æŒ‡ç¤ºå™¨ä¸ºçº¿åž‹çš„样式
         lineStyle() {
            let style = {}
            style.width = uni.$u.addUnit(this.lineWidth)
            style.transform = `translateX(${ uni.$u.addUnit(this.current * this.lineWidth) })`
            style.backgroundColor = this.indicatorActiveColor
            return style
         },
         // æŒ‡ç¤ºå™¨ä¸ºç‚¹åž‹çš„样式
         dotStyle() {
            return index => {
               let style = {}
               style.backgroundColor = index === this.current ? this.indicatorActiveColor : this.indicatorInactiveColor
               return style
            }
         }
      },
   }
</script>

<style lang="scss" scoped>
   @import "../../libs/css/components.scss";

   .u-swiper-indicator {

      &__wrapper {
         @include flex;

         &--line {
            border-radius: 100px;
            height: 4px;

            &__bar {
               width: 22px;
               height: 4px;
               border-radius: 100px;
               background-color: #FFFFFF;
               transition: transform 0.3s;
            }
         }

         &__dot {
            width: 5px;
            height: 5px;
            border-radius: 100px;
            margin: 0 4px;

            &--active {
               width: 12px;
            }
         }

      }
   }
</style>