vue之封装tab类组件

vue之封装tab类组件

需求：点击【上一步】、【下一步】按钮，切换tab，且有淡入浅出的动画。

CSS样式方面

<div class="parent">
	<div class="childDiv" id="div0">0div>
		<div class="childDiv" id="div1">1div>
		<div class="childDiv" id="div2">2div>
		<div class="childDiv" id="div3">3div>
		<div class="childDiv" id="div4">4div>
		<div class="childDiv" id="div5">5div>
		<div class="childDiv" id="div6">6div>
		<div class="childDiv" id="div7">7div>
		<div class="childDiv" id="div8">8div>
		<div class="childDiv" id="div9">9div>
div>


<style>
.parent{
	background:green;
	width:600px;
	height:100px;

    // 设置flex布局，且当子元素撑开父元素的时候显示滚动条。
    display:flex;
    overflow-y: auto;
}


.childDiv{
	background:red;
	width:200px;
	height:100px;
	border:1px solid black;

    // 此时，让div保持原有宽度，撑开父元素后，出现滚动条，而不是改变宽度自适应。
	flex-shrink: 0;
}
style>

JS方面

<div id="myDiv1">需求：点击切换数组中的item，且添加动画div>
<div id="before" style="margin-top:50px"> 上一个 div>
<div style="background:green;width:600px;height:100px;display:flex;overflow-y: auto;" id="myDiv2">
		<div class="childDiv" id="div0">0div>
		<div class="childDiv" id="div1">1div>
		<div class="childDiv" id="div2">2div>
		<div class="childDiv" id="div3">3div>
		<div class="childDiv" id="div4">4div>
		<div class="childDiv" id="div5">5div>
		<div class="childDiv" id="div6">6div>
		<div class="childDiv" id="div7">7div>
		<div class="childDiv" id="div8">8div>
		<div class="childDiv" id="div9">9div>
div>
<div id="after" style="margin-top:20px"> 下一个 div>	
<style>
.coup-anim {
	/* 淡入 */
	animation: fadeIn 4s .1s ease both;
}

@keyframes fadeIn {
 0% {
  opacity: 0;
  transform: translateY(400upx)
 }

 100% {
  opacity: 1;
  transform: translateY(0)
 }
}


.childDiv{
	background:red;
	width:200px;
	height:100px;
	border:1px solid black;
	flex-shrink: 0;
}
style>
<script>
// 声明一个变量，用于记载tab总长度
var total = 10;
// 声明一个变量，用于记录移动到那个位置了
var arrIndex = 0;
// 声明一个变量，用于记录移动的步长
var arrStrp = 3;

// 一次性移动三个，且添加动画 
var myDiv2 = document.getElementById("myDiv2");

var before = document.getElementById("before");
before.addEventListener("click", function() {
		/*
			动画方面注释：
				先移除动画，后添加动画。
				注意动画需要延迟触发，否则触发不了
		*/
		// 移除动画
		myDiv2.classList.remove("coup-anim");
	    // 延迟触发动画,否则动画触发不了
		setTimeout(()=>{
			myDiv2.classList.add("coup-anim");
		},10)
		
		
		/*
			重置dispaly的状态
		*/ 
		for(let i=0;i<=total-1;i++){
			const divI = document.getElementById("div"+i);
			divI.style.display = ""
		}
		
		/*
			正常情况，每次按照步长往前走
			但是当arrIndex-arrStrp<=0时，也就是再减减不动的时候，只显示前三个。
			
			
			且arrIndex置成0；
		*/
		// before操作的时候，arrIndex就是下标的位置。
		if(arrIndex-arrStrp<=0){
			// 只显示前面三个，别的div给隐藏掉	
			for(let i=3;i<total;i++){
				const divI = document.getElementById("div"+i);
				divI.style.display = "none"
			}	
			arrIndex = 0;
			return ;			
		}else{
			// 只显示前面三个，别的div给隐藏掉	
		    arrIndex = arrIndex-3;
			const myStep = arrIndex+3;
			for(let i=0;i<arrIndex;i++){
				const divI = document.getElementById("div"+i);
				divI.style.display = "none"
			}		
			for(let i=myStep;i<total;i++){
				const divI = document.getElementById("div"+i);
				divI.style.display = "none"
			}
		}
});


// 逻辑同上
var after = document.getElementById("after");
	after.addEventListener("click", function() {
		// 移除动画
		myDiv2.classList.remove("coup-anim");
		// 延迟触发动画,否则动画触发不了
		setTimeout(()=>{
			myDiv2.classList.add("coup-anim");
		},10)
		arrIndex = arrIndex+3; // 3
		// 重置dispaly的状态
		for(let i=0;i<=total-1;i++){
			const divI = document.getElementById("div"+i);
			divI.style.display = "";
		}
		if(arrIndex+arrStrp>=total){
			// 只显示后面三个
			for(let i=0;i<total-3;i++){
				const divI = document.getElementById("div"+i);
				divI.style.display = "none"
			}
			arrIndex = total-arrStrp;
			return ;
		}else{
			const myStep = arrIndex+3;
			for(let i=arrIndex-1;i>=0;i--){
				const divI = document.getElementById("div"+i);
				divI.style.display = "none"
			}		
			for(let i=myStep;i<total;i++){
				const divI = document.getElementById("div"+i);
				divI.style.display = "none"
			}	
		}
		
});
script>

总的来说是这个思路：

1. 需要三个确定的数值：(这个是相通的，比如分片上传。需要这些参数，也是为了将数组分片)
   1.1.1 数组的长度(tab长度)
   1.1.2 起始的下标(游标)
   1.1.3 步长
2. 【上一步】、【下一步】按钮的逻辑
   2.1.1 【下一步】如果说：if（游标arrIndex + 步长arrstep > 数组的长度的时候，说明已经到底了。这个时候，需要显示后面三个，其余的隐藏即可） else（显示游标arrIndex后面的三个元素即可，别的隐藏）
   2.1.2 【上一步】 如果说if（游标arrIndex - 步长arrstep<0 的时候，说明已经到头了。这个时候，只需要显示前面三个，其余的隐藏即可） else（显示游标arrIndex后面的三个元素即可）
3. 在按钮点击的时候，添加动画。

代码已资源绑定