<template>
<view>
<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>
</view>
</template>
<script>
export default {
data() {
return {
swiperImg: [
'https://img.yzcdn.cn/vant/cat.jpeg',
'https://gtd.alicdn.com/sns_logo/i1/TB124_3NXXXXXasXVXXSutbFXXX.jpg_240x240xz.jpg',
'https://cdn.uviewui.com/uview/common/logo.png'
],
current: 0,
swiperCurrent: 0,
}
},
onLoad() {
},
methods: {
changeSwiper(e) {
this.swiperCurrent = e.detail.current;
}
}
}
</script>
<style lang="scss" scoped>
.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>
uniapp自定义轮播图swiper-dot轮播图指示点样式自定义
于 2024-07-11 16:09:37 首次发布