<template>
<div class="swiper">
<u-swiper :list="banner" height="100" @change="e => current = e.current" :autoplay="false">
<view slot="indicator" class="indicator">
<view class="indicator__dot" v-for="(item, index) in banner" :key="index"
:class="[index === current && 'indicator__dot--active']">
</view>
</view>
</u-swiper>
</div>
</template>
<script>
export default {
data() {
return {
current: 0
};
},
props: {
banner: {
type: Array,
default () {
return [];
}
}
},
};
</script>
<style lang="scss" scoped>
.swiper {
width: 710rpx;
height: 200rpx;
margin: 20rpx auto;
}
.indicator {
@include flex(row);
justify-content: center;
&__dot {
height: 6px;
width: 6px;
border-radius: 100px;
background-color: rgba(255, 255, 255, 1);
margin: 0 5px;
transition: background-color 0.3s;
&--active {
background-color: rgba(229, 164, 20, 1);
}
}
}
.indicator-num {
padding: 2px 0;
background-color: rgba(0, 0, 0, 0.35);
border-radius: 100px;
width: 35px;
@include flex;
justify-content: center;
&__text {
color: #FFFFFF;
font-size: 12px;
}
}
</style>