<template>
    <div>
        <h1>轮播图</h1>
      <swiper :options="swiperOption" ref="mySwiper">
        <swiper-slide v-for="(item, index) in list" :key="index">
            <img @click="getImg(item)" :src="item.img" alt="">
            <p>{{item.name}}</p>
        </swiper-slide>
        <div class="swiper-button-prev swiper-button-red" slot="button-prev"></div>
        <div class="swiper-button-next swiper-button-blue" slot="button-next"></div>
      </swiper>
      <button @click="prev">上一页</button>
      <div @click="next">下一页</div>
    </div>
</template>
           
<script>
export default{
    data () {
        return {
            list:[
                {name: '11111', img: require('../../assets/img/1.jpg')},
                {name: '22222', img: require('../../assets/img/2.jpg')},
                {name: '33333', img: require('../../assets/img/3.jpg')},
                {name: '44444', img: require('../../assets/img/4.jpg')},
                {name: '55555', img: require('../../assets/img/5.jpg')},
                {name: '66666', img: require('../../assets/img/6.jpg')},
                {name: '77777', img: require('../../assets/img/7.jpg')},
                {name: '88888', img: require('../../assets/img/8.jpg')},
                {name: '99999', img: require('../../assets/img/9.jpg')},
                {name: '10100', img: require('../../assets/img/10.jpg')},
            ] ,
             swiperOption: {
                slidesPerView: 3,
                spaceBetween: 30,
                slidesPerGroup: 3,
                loop: true,
                loopFillGroupWithBlank: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev'
                }
             }     
        }
    },
      computed: {
            swiper() {
            return this.$refs.mySwiper.swiper
            }
        },
 
    methods: {
        getImg(item) {
            console.log(item,'iiiii');
            
        },
        prev() {
            this.swiper.slidePrev();
        },
        next() {
             this.swiper.slideNext()
        }
    },
             
}
</script>

安装了2.6.7版本的发现上一页下一页使用不了,点击没有效果,这时有两个办法:

1.重新安装3.1.3版本的就能解决问题

2.使用 this.swiper来调用上一页下一页的方法,这样也方便了其他操作了