uniapp使用轮播组件swiper,添加左右滑动按钮

<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>

猜你喜欢

转载自blog.csdn.net/qq_29483485/article/details/128799235