<template>
<swiper class="swiper" circular :indicator-dots="false" :autoplay="false" :interval="2000" id="swiper" :current="swiper_current" :duration="500">
<swiper-item v-for="(item,index) in list" :key="index">{
{item}}</swiper-item>
<view @tap="prevSwiper" class="icon-arrow arrow-left">
<u-icon name="arrow-left" color="#ffffff" size="28"></u-icon>
</view>
<view @tap="nextSwiper" class="icon-arrow arrow-right">
<u-icon name="arrow-right" color="#ffffff" size="28"></u-icon>
</view>
</swiper>
</template>
<script>
export default {
data() {
return {
list:[],
swiper_current: 0
}
},
methods: {
//上一页
prevSwiper() {
let current = this.swiper_current;
let ncurrent = current > 0 ? current - 1 : this.list.length - 1;
this.swiper_current = ncurrent
console.log(this.swiper_current)
},
// 下一页
nextSwiper() {
let current = this.swiper_current;
let ncurrent = current < (this.list.length - 1) ? current + 1 : 0;
this.swiper_current = ncurrent
console.log(this.swiper_current)
},
}
}
</script>
uniapp使用轮播组件swiper,添加左右滑动按钮
猜你喜欢
转载自blog.csdn.net/qq_29483485/article/details/128799235
今日推荐
周排行