Vue项目中常见问题

目录

gitee仓库地址:登录 - Gitee.comhttps://gitee.com/CMD-UROOT/sph-project/commits/master

 1.安装swiper

 2.在ListContainer/index.vue中引入swiper包

 3.在main.js中引入swiper的样式

 4.遍历轮播图,替换数据

 5.初始化Swiper

6初始化Swiper,但是要放到ListContainer/index.vue中的哪个位置?

第一种解决方法:定时器

---

gitee仓库地址:登录 - Gitee.comhttps://gitee.com/CMD-UROOT/sph-project/commits/master

大家根据上传历史进行查找你需要的代码

1.安装swiper

地址:下载Swiper - Swiper中文网

npm install --save swiper@5

安装完成后在package.json中可以看到

 2.在ListContainer/index.vue中引入swiper包

 3.在main.js中引入swiper的样式

因为首页不止有一个组件有轮播图,这些轮播图的样式都是一样的

 4.遍历轮播图,替换数据

id和imgUrl的数据来源

 

 5.初始化Swiper

在swiper中Swiper使用方法 - Swiper中文网

复制这下面的代码

 var mySwiper = new Swiper(document.querySelector('.swiper-container'), {
        //第一个参数：设置轮播图方向【属性这有两个：水平、垂直】
        // direction: 'vertical', 
        // 开启循环模式
        loop: false,
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });

6初始化Swiper,但是要放到ListContainer/index.vue中的哪个位置?

 把new Swiper实例放在mounte这里发现不行

为什么不行:因为结构不完整,在new Swiper实例之前,页面中结构必须有

也不能放updated

放updated只能暂时解决问题,万一它将来还有响应式的其他数据它一更新,updeted中的数据又会new一个,没必要

第一种解决方法:定时器

在ListContainer/index.vue 的mounted中加入定时器

   //在new Swiper实例之前,页面中结构必须有[现在把new Swiper实例放在mounte这里发现不行] 
    //因为dispatch当中涉及到异步语句,导致v-for遍历的时候结构还没有完全,因此不行
    //也不能放updated,放updated只能暂时解决问题,万一它将来还有响应式的其他数据它一更新,updeted中的数据又会new一个,没必要
setTimeout(()=>{
      var mySwiper = new Swiper(document.querySelector('.swiper-container'), {
        //第一个参数：设置轮播图方向【属性这有两个：水平、垂直】
        // direction: 'vertical', 
        // 开启循环模式
        loop: true,
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            //点击小球的时候也切换图片
            clickable:true 
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
    },2000);