Swiper踩坑

当我在Vue项目中使用swiper时，发现在使用分页功能时，分页功能不能显示。后来查询资料，终于找到了问题所在

首先，分页功能不能写到Vue的生命周期中(created,mounted…)此时要滑动的数据还没有完全显示，当数据显示完毕，分页按钮就会被屏蔽掉。
根据这个问题，我们可以使用监听方法，监听要滑动数据对象的数据，若数据改变就会执行分页按钮代码，但是仅当数据改变就执行并不会产生我们想要的结果，只有数据执行完毕分页按钮才会显示。例如创建一个定时器，设置好时间，代码执行完毕

watch: {
    categorys() {
       setTimeout(() => {
         //创建一个swiper对象来实现轮播
           new Swiper(".swiper-container", {
           pagination: ".swiper-pagination",
           paginationClickable: true
         });
       }, 100);
     }
}

也可以使用vue内置的this.$nextTick(）方法。此方法是一旦完成界面更新，立即执行.此语句要写到数据更新之后

watch: {
    categorys() {
          this.$nextTick(() => {
            new Swiper(".swiper-container", {
              pagination: ".swiper-pagination",
              paginationClickable: true
        });
      });
    }
}