VUE 使用swiper做分类轮播无法滑动

Question

问题如图

调用Swiper

 getClassList_ok(data){

            if (Number(data.MsgState) !== 1) {
                return;
            };
                this.classList = [];
                this.classList = data.MsgDate;
                
                **//数据加载完成后调用Swiper**
                new Swiper ('.swiper-container', {
                    slidesPerView : 5,
                    centeredSlides : false,
                })
        },

关键是点击触发的事件跟Swiper也没关系

gettransclass(skid){
            this.couponskid = skid
            let vuedata = {
                  PageNumber:1,
                  PageLimit:'',
                  SKID:skid
            }
            vueajax(this,"coupon/coupon_/USKID_Coupon_List",vuedata,"gettransclass_ok","get",0)
          },
          gettransclass_ok(data){
            if (Number(data.MsgState) !== 1) {
                this.already_take_list = false;
                 return;
            };
            this.UserCouponList = [];
            this.already_take_list = true;
            this.UserCouponList = data.MsgDate.DataList;
          },

Answer 1

这问题我以前也遇到过，是因为 dom 没有加载完成的原因。

 getClassList_ok(data){
        if (Number(data.MsgState) !== 1) {
            return;
        };
            this.classList = [];
            this.classList = data.MsgDate;
            
            **//数据加载完成后调用Swiper**
            this.$nextTick(() => {
                new Swiper ('.swiper-container', {
                slidesPerView : 5,
                centeredSlides : false,
            })
            })
    },