116 lines
2.8 KiB
Vue
116 lines
2.8 KiB
Vue
|
<template>
|
|||
|
|
<view class="u-swiper-indicator">
|
|||
|
|
<view
|
|||
|
|
class="u-swiper-indicator__wrapper"
|
|||
|
|
v-if="indicatorMode === 'line'"
|
|||
|
|
:class="[`u-swiper-indicator__wrapper--${indicatorMode}`]"
|
|||
|
|
:style="{
|
|||
|
|
width: 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';
|
|||
|
|
import mpMixin from '../../libs/mixin/mpMixin';
|
|||
|
|
import mixin from '../../libs/mixin/mixin';
|
|||
|
|
import { addUnit } from '../../libs/function/index';
|
|||
|
|
/**
|
|||
|
|
* SwiperIndicator 轮播图指示器
|
|||
|
|
* @description 该组件一般用于导航轮播，广告展示等场景,可开箱即用，
|
|||
|
|
* @tutorial https://ijry.github.io/uview-plus/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: [mpMixin, mixin, props],
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
lineWidth: 22
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
// 指示器为线型的样式
|
|||
|
|
lineStyle() {
|
|||
|
|
let style = {}
|
|||
|
|
style.width = addUnit(this.lineWidth)
|
|||
|
|
style.transform = `translateX(${ 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
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
addUnit
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</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>
|