vue-awesome-swiper的上一页下一页失效问题

_FFFFFF,t_70)

<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来调用上一页下一页的方法,这样也方便了其他操作了

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值