可以点击箭头左右切换-进行轮播
bash
<template>
<view class="swiper-container">
<swiper class="swiper" :current="currentIndex" :autoplay="true" interval="9000" circular indicator-dots
@change="handleSwiperChange">
<block v-for="(item, index) in swiperList" :key="index">
<swiper-item>
<!-- 轮播项的内容 -->
<image class="swiper-image" :src="item.image"></image>
</swiper-item>
</block>
</swiper>
<view class="arrow arrow-left" @tap="prev"></view>
<view class="arrow arrow-right" @tap="next"></view>
</view>
</template>
<script>
export default {
data() {
return {
swiperList: [{
image: "http://www.jq22.com/img/cs/500x500-9.png"
},
{
image: "http://www.jq22.com/img/cs/500x500-9.png"
},
{
image: "http://www.jq22.com/img/cs/500x500-9.png"
},
],
currentIndex: 2,
};
},
methods: {
handleSwiperChange(event) {
const current = event.detail.current;
this.currentIndex = current;
console.log("当前轮播到第", current, "个索引");
},
prev() {
this.currentIndex = (this.currentIndex - 1 + this.swiperList.length) % this.swiperList.length;
},
next() {
this.currentIndex = (this.currentIndex + 1) % this.swiperList.length;
},
},
};
</script>
<style>
.swiper-container {
position: relative;
}
.swiper {
height: 200px;
/* 设置轮播的高度 */
}
.swiper-image {
width: 100%;
height: 100%;
}
.arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
background-color: #000;
opacity: 0.6;
border-radius: 50%;
}
.arrow-left {
left: 10px;
}
.arrow-right {
right: 10px;
}
</style>