[JavaScript知识库]轮播图与$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自动绑定到调用它的实例上。

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖