You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

111 lines
2.6 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<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>