swiper轮播-vue-apicloud：第一张快速闪过、轮播受下拉影响、点击事件失效、数据动态更改等问题

女爷i 2022-03-16 08:06 125阅读 0赞

Vue.component('swiper',{
        template:'<div class="swiper-container banner_swiper">' +
            '<div class="swiper-wrapper">' +
            '<div class="swiper-slide" v-for="(item,index) in items" :key="index"><img :src="item.image" alt=""></div>' +
            '</div><div class="swiper-pagination"></div></div>',
        props:{
            data: {
                type:Array
            },
            // 为了区分同一个页面里的多个轮播图，把轮播图的父级类名传过来
            parentClass: {
                type: String
            },
            //frame需不需要抖动
            setframe:{
                type:Boolean,
                default:true
            }
        },
        data() {
            return {
                items: [],
                parentC: '',
                mySwiper:'',
            }
        },
        watch: {
            data() {
                this.mySwiper.stopAutoplay();
                this.items = this.data;
                if(this.items.length == 1){
                    this.mySwiper.params.loop = false;
                    //如果只有一张图片则不让复制slid
                    this.mySwiper.params.loopAdditionalSlides = -1;
                    //一张图片则隐藏锚节点
                    $('.'+this.parentC+' .swiper-pagination').css("display","none");
                }else{
                    this.mySwiper.params.loop = true;
                    this.mySwiper.params.loopAdditionalSlides = 1;
                    $('.'+this.parentC+' .swiper-pagination').css("display","block");
                }
                 this.$nextTick(function(){
                     this.mySwiper.update();
                     this.mySwiper.reLoop();
                     this.mySwiper.startAutoplay();
                 })
            },
            parentClass(){
                this.parentC = this.parentClass;
            }
        },
        mounted(){
            this.items=this.data;
            this.parentC = this.parentClass;
            let vm = this;
            let options = {};
            options.pagination = '.'+this.parentC+' .swiper-pagination';
            if(this.items.length > 1){  //如果数组长度大于1才让循环轮播
                options.loop = true;
            }
            options.autoplay = 3000;
            options.autoplayDisableOnInteraction = false;
            options.observer = true; //修改swiper自己或子元素时，自动初始化swiper
            options.observeParents = true; //修改swiper的父元素时，自动初始化swiper
            options.onTouchEnd= function(swiper) {
                //安卓的特殊处理
                if(app.isAndroid() && vm.setframe){
                    console.log(vm.setframe)
                    api.setFrameAttr({  //设置frame属性：可以抖动
                        name: api.frameName,
                        bounces: true
                    });
                }
    
            };
            options.onSliderMove = function() {
                //安卓的特殊处理
                if(app.isAndroid() && vm.setframe){
                    api.setFrameAttr({  //设置frame属性：不可以抖动
                        name: api.frameName,
                        bounces: false
                    });
                }
            };
            //在移动端，click会有 200~300 ms延迟，所以请用tap代替click作为点击事件
            options.onTap = function(e) {
                let index=e.realIndex;
                let item=vm.items[index];
                //点击跳转
                if(item && item.url){
                    router.redirect(item.url,{'title':item.title})
                }
            };
            options.onInit = function(){
                if(vm.items.length == 1){
                    //一张图片则隐藏锚节点
                    $('.'+vm.parentC+' .swiper-pagination').css("display","none");
                }
            };
            //轮播时第一张会快速闪过，放在nextTick中可以解决该问题
            this.$nextTick(function() {
                this.mySwiper = new Swiper('.'+this.parentC+' .banner_swiper',options);
            })
        }
    });

[https://www.cnblogs.com/DivHao/p/6866399.html][https_www.cnblogs.com_DivHao_p_6866399.html]

[https_www.cnblogs.com_DivHao_p_6866399.html]: https://www.cnblogs.com/DivHao/p/6866399.html