swriper(2.6.7版本)轮播中,设置loop:true,并引用preButton,nextButton,两个箭头按钮无法点击且报错

来源:7-4 Vue项目首页 - 首页轮播图

慕粉1474714611

2019-09-03

老师,我在你讲的基础上,加了写功能,想做成轮播图能自动轮播,且能够点击两个箭头按钮,但当设置loop为true时,点击两个箭头按钮都报了这个错

“[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080”

<template>

    <div class="wrapper">

        <swiper :options="swiperOption" ref="mySwiper">

            <swiper-slide v-for="item of swiperList" :key="item.id">

                <img class="swiper-img" :src="item.imgUrl" />

            </swiper-slide>

            <div class="swiper-pagination"  slot="pagination"></div>

            <div class="swiper-button-prev"  slot="button-prev"></div>

            <div class="swiper-button-next"  slot="button-next"></div>

            <!-- <div class="swiper-scrollbar"  slot="scrollbar"></div> -->

        </swiper>

    </div>

</template>

<script>

import img1 from '@/assets/images/banner1.png'

import img2 from '@/assets/images/banner2.png'

import img3 from '@/assets/images/banner3.png'

export default {

    name: 'swiperHome',

    data () {

        const that = this;

        return {

            swiperOption: {

                pagination: '.swiper-pagination',

                paginationClickable: true,//小点可被点击

                parallax: true,

                prevButton: '.swiper-button-prev',

                nextButton: '.swiper-button-next',

                loop: true,

                slidesPerView: 1, // 展示1个slide

                spaceBetween: 0, // slide的margin-right为0px

                notNextTick: true,

                initialSlide: 0,

                observer: true,//修改swiper自己或子元素时,自动初始化swiper

                observeParents: true,//修改swiper的父元素时,自动初始化swiper       

                //自动播放

                autoplay: {

                    delay: 1500,

                    stopOnLastSlide: false,

                },

                autoplayDisableOnInteraction: false,

                speed: 1200,

                direction: "horizontal",

                grabCursor: true,

                //分页器设置

                pagination: '.swiper-pagination'

            },

            swiperList: [{

                id: '001',

                imgUrl: img1

            }, {

                id: '002',

                imgUrl: img2

            }, {

                id: '003',

                imgUrl: img3

            }]

        }

    },

   }


写回答

1回答

Dell

2019-09-08

同学你好,这是一个警告,不影响正常使用,在swiper新版本中已经完成了修复,不过老版本也不会影响你的功能。

0
2
Dell
回复
慕粉1474714611
你如果降级到我的课程里的版本,会出这个问题吗
2019-09-09
共2条回复

Vue2.5-2.6-3.0开发去哪儿网App 零基础入门到实战

课程紧跟Vue3版本迭代,企业主流版本Vue2+Vue3全掌握

10675 学习 · 8191 问题

查看课程