vue之封装tab类组件

vue之封装tab类组件

• • vue之封装tab类组件

vue之封装tab类组件

CSS样式方面

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

代码已资源绑定