实现效果
<template>
<view class="container">
<!-- 轮播 -->
<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" :current="swiperCurrent" @change="changeSwiper">
<swiper-item v-for="item in swiperImg" :key="item.id">
<image class="swiper-item" :src="item" mode="widthFix"></image>
</swiper-item>
</swiper>
<!-- 轮播指示点样式修改 -->
<view class="dots">
<block v-for="(item,index) in swiperImg.length" :key="item">
<view class="dot" :class="index==swiperCurrent ? ' active' : ''"></view>
</block>
</view>
</view>
</template>
<script>
export default {
data() {
return {
swiperImg: [
'https://ossali.sucaihuo.com/sucaihuo/banners/24.jpg',
'https://ossali.sucaihuo.com/sucaihuo/banners/9.jpg'
],
current: 0,
swiperCurrent: 0,
};
},
methods: {
changeSwiper(e) {
this.swiperCurrent = e.detail.current;
}
}
}
</script>
<style lang="scss">
.container {
position: relative;
.swiper {
width: 700rpx;
height: 240rpx;
border-radius: 16rpx;
overflow: hidden;
margin-top: 16rpx;
position: relative;
margin-left: 26rpx;
.swiper-item {
width: 700rpx;
height: 240rpx;
border-radius: 16rpx;
}
}
.dots {
position: absolute;
bottom: 20rpx;
left: 50%;
// 这里一定要注意兼容不然很可能踩坑
transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
z-index: 99;
display: flex;
flex-direction: row;
justify-content: center;
.dot {
width: 24rpx;
height: 8rpx;
transition: all .6s;
background: rgba(0, 0, 0, .3);
margin-right: 10rpx;
}
.active {
width: 24rpx;
height: 8rpx;
background: rgba(255, 255, 255, .8);
}
}
}
</style>
网友评论