轮播图与$nextTick

轮播图的数据：展现多页，每页展示8个，方法如下：

==使用二维数组，先遍历第一层 ，在遍历第二层==

// 根据categorys二维数组生成一个二维数组，小数组中的元素个数最大是8个
categorysArr(){
   
    const {
   categorys} =this
    // 准备两个空数组
    const arr = []
    let minArr = []
    // 遍历categorys
    categorys.forEach(c=>{
   

        // 如果当前小数组已经满了，创建一个新的小数组
        if(minArr.length === 8){
   
            minArr =[]
        }
        // 如果minArr是空的，将小数组保存到大数组中
        if(minArr.length === 0){
   
            arr.push(minArr)
        }
        // 将当前分类保存到小数组中
        minArr.push(c)
    })
    return arr
}

使用watch和$nextTick解决轮播图的bug

效果：页面展示在更新数据之后立即生效

一旦完成界面更新，立即调用

watch:{
    
    // 创建一个Swiper实例对象，来实现轮播
    this.$nextTick(()=>{
    
        new Swiper('.swiper-container',{
    
            loop:true;// 开启可以循环轮播
            pagination:{
    
                el:''.swiper-pagination,//开启圆点显示
            }
        })
    })
}

vm.$nextTick([callback])

用法：将回调延迟到下次DOM更新循环之后执行，在修改数据之后立即使用它，然后等待DOM更新，它跟全局方法Vue.nextTick一样，不同的是回调的this自动绑定到调用它的实例上。